这是一个创建于 3112 天前的主题，其中的信息可能已经有所发展或是发生改变。
自学 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