怎样调试 Webpack 打包好的代码吗？

[NicholasNC]

自学 react+redux ，教程基本上都是用 ES6 写的，并且用 webpack 管理依赖、打包（我的 webpack 是 0 基础，基本不会用，只是看了一些快速入门教程）。

现在有个困惑，怎样调试 webpack 打包好的代码？ webpack 打包好的 bundle.js ，一脸茫然，根本看不懂，更加不用说调试。

不知大神有没有比较好的建议。指点指点一下小弟

[learnshare]

sourcemap

[NicholasNC]

@learnshare 请问具体怎样用，是可以直接作为 webpack 的一个插件吗？

[xwartz]

看官方文档 devtool

[bdbai]

用 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

[plqws]

楼上正解

[linxl]

webpack -d + chrome react 插件。

[NicholasNC]

@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 就没问题

[bdbai]

@NicholasNC Webpack 的文档经常被人吐槽😂
楼上说的 Chrome 插件也推荐你试试， React 官方出的，可以审查组件。

[NicholasNC]

@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 文档？

[bdbai]

@NicholasNC GitHub 上写这个插件已经被弃用了。建议你用 react-hot-loader 。可以看一下我的配置，链接在 4 楼。
前两天有人在 V 站上说要翻译 Webpack 文档的，你可以搜一下。