工具：Chrome 开发者工具、ReactJs 和 Webpack
也许是当我切换到与 webpack 捆绑时，但最初当我开始我的项目时，我能够将我的 js 捆绑到一个 bundle.js 文件中，但仍然可以访问浏览器调试工具中的文件。现在我在浏览器中的 js 文件夹中看到的只是 bundle.js
使用 webpack 如何让我能够在浏览器调试器中查看我的所有 Javascript 文件，以便我可以执行诸如插入断点之类的操作？
【问题讨论】：
标签： javascript debugging reactjs google-chrome-devtools webpack
现在更新了，您只需在 module.exports 顶部包含 mode:"development" 并在 .js 文件中的任何位置设置调试器，它将工作并打开 chrome devtools
webpack.config.js：
const path = require('path')
module.exports = {
mode: 'development',
entry: path.join(__dirname,'src/js','index.js'),
output: {
path: path.join(__dirname, 'dist'),
filename: 'build.js'
},
module: {}
}
【讨论】：
在长时间毫无意义地使用一堆打印语句后，我终于回过头来想出了如何做到这一点。
捆绑后如何再次使用断点：
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 答案以及发布的图片，我终于找到了该文件夹的位置。
【讨论】：
您可以使用 the devtool option 让 webpack 生成源映射，这 (when enabled in the Chrome devtools options) 将允许 Chrome 将 bundle.js 中的代码（甚至可能被缩小）转换为原始源代码。
对于开发，我将此选项设置为 eval-source-map 或 cheap-eval-source-map，对于生产，我要么关闭此选项，要么使用 source-map 生成单独的源映射文件。
【讨论】：