javascript – 使用bundle.js时在浏览器中反应调试

工具：Chrome Developer Tools,ReactJs和Webpack

也许是当我切换到与webpack捆绑在一起,但是最初当我开始我的项目时,我能够将我的js绑定到一个bundle.js文件,但仍然可以访问浏览器调试工具中的文件.现在我在js文件夹的浏览器中看到的是bundle.js

使用webpack我如何恢复能够看到浏览器调试器中的所有Javascript文件,所以我可以做插件断点的东西？

解决方法

经过很长时间的无意义地使用一堆打印声明,我终于回头了解如何做到这一点.

以下是捆绑后再次使用断点的能力：

1)

转到您的webpack.config.js文件,并将devtools从“true”更改为“source-map”或@MichelleTilley在其答案中解释的其他选项之一.

webpack.config.js(这里是一个例子)

module.exports = {
  entry: "./js/app.js",output: {
    filename: "js/bundle.js"
  },debug: true,devtool: "#eval-source-map",module: {
    loaders: [
      {
        test: /\.jsx?$/,exclude: /(node_modules|bower_components)/,loader: 'babel'
      }
    ]
  }
};

2)

也像@MichelleTilley在她的答案中解释,您可能需要在Chrome中启用devtools选项.

3)

之后,当你去调试,你将不得不寻找一个刚刚命名为“”的新文件夹.那是超级注意！

感谢Stackoverflow的答案下面发布的图像我终于找到那个文件夹的位置.

Configure webpack to allow browser debugging