首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
拉勾
V2EX  ›  webpack

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

  •  
  •   NicholasNC · 2016-06-16 19:29:09 +08:00 · 12253 次点击
    这是一个创建于 1007 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    10 回复  |  直到 2016-06-17 22:07:53 +08:00
        1
    learnshare   2016-06-16 19:43:31 +08:00
    sourcemap
        2
    NicholasNC   2016-06-16 19:53:17 +08:00
    @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   2016-06-17 16:08:53 +08:00   ♥ 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   2016-06-17 21:27:34 +08:00
    @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 文档的,你可以搜一下。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2504 人在线   最高记录 4385   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 17ms · UTC 15:03 · PVG 23:03 · LAX 08:03 · JFK 11:03
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1