自学 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 ![]() @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 文档的,你可以搜一下。 |