工具：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