这是一个创建于 3411 天前的主题，其中的信息可能已经有所发展或是发生改变。
自学 react+redux ，教程基本上都是用 ES6 写的，并且用 webpack 管理依赖、打包（我的 webpack 是 0 基础，基本不会用，只是看了一些快速入门教程）。
现在有个困惑，怎样调试 webpack 打包好的代码？ webpack 打包好的 bundle.js ，一脸茫然，根本看不懂，更加不用说调试。
不知大神有没有比较好的建议。指点指点一下小弟
 | 1 learnshare 2016-06-16 19:43:31 +08:00 sourcemap |
 | 2 NicholasNC OP @learnshare 请问具体怎样用，是可以直接作为 webpack 的一个插件吗？ |
 | 3 xwartz 2016-06-16 20:07:18 +08:00 看官方文档 devtool |
 | 4 bdbai 2016-06-16 20:59:56 +08:00 via Android 用 Webpack 写 React 一定要搭配 webpack-dev-server + react-hot-loader 。在 webpack 配置里面加 devtool: 'source-map' 就可以用浏览器直接调试代码了。 我最近在写一个 React 项目，你可以参考这个 webpack 开发时的配置 https://coding.net/u/bdbai/p/nthskeys-node/git/blob/master/app/webpack.development.config.js |
 | 5 plqws 2016-06-16 21:41:48 +08:00 楼上正解 |
 | 6 linxl 2016-06-17 09:12:54 +08:00 webpack -d + chrome react 插件。 |
| 7 NicholasNC OP  1 @bdbai 不好意思，没有及时回复。 已经尝试，在 webpack 配置里面加 devtool: 'source-map'可以实现断点调试。 另外，我还发现，在 webpack 中 sourcemap 有多种模式，不同模式的效果不一样，可参考 https://segmentfault.com/a/1190000004280859 http://www.jianshu.com/p/c0492554b33c 我试过一下， eval-source-map 不能实现断电调试， source-map 和 cheap-module-source-map 就没问题 |
| 8 bdbai 2016-06-17 20:46:01 +08:00 via Android @NicholasNC Webpack 的文档经常被人吐槽 楼上说的 Chrome 插件也推荐你试试， React 官方出的，可以审查组件。 |
| 9 NicholasNC OP @bdbai 是的。现在比较大的问题是 Webpack 的细节（虽然网上很多入门教程，但是入门然后就没然后了）， Webpack 很多细节上还想都没怎么讲，刚刚遇到一个错误 index.js:51Uncaught Error: locals[0] does not appear to be a `module` object with Hot Module replacement API enabled. You should disable react-transform-hmr in production by using `env` section in Babel configuration. See the example in README: https://github.com/gaearon/react-transform-hmr 估计是 react-transform-hmr 这个插件的问题，暂时还没有找到解决方法。 不知道有没有好一点的 Webpack 文档？ |
| 10 bdbai 2016-06-17 22:07:53 +08:00 via Android @NicholasNC GitHub 上写这个插件已经被弃用了。建议你用 react-hot-loader 。可以看一下我的配置，链接在 4 楼。 前两天有人在 V 站上说要翻译 Webpack 文档的，你可以搜一下。 |
Select Language