Question

工具：Chrome开发者工具，ReactJs和Webpack

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

使用webpack如何回到能够在浏览器调试器中查看我的所有Javascript文件，以便我可以执行插入断点等操作？

Answer 1

经过长时间无意义地使用一堆打印语句后，我终于回过头来想办法如何做到这一点。

以下是捆绑后再次使用断点的方法：

<强> 1）

转到您的webpack.config.js文件并从＆＃34; true＆＃34;设置devtools。 to＆＃34; source-map＆＃34;或@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）

在此之后，当您进行调试时，您将不得不寻找一个名为＆＃34;的新文件夹。＆＃34;这是非常难以注意到的！

感谢下面的Stackoverflow答案和发布的图片，我终于找到了该文件夹的位置。

Configure webpack to allow browser debugging

Answer 2

您可以使用the devtool option让webpack生成源地图，（when enabled in the Chrome devtools options）将允许Chrome将bundle.js中的代码（甚至可能缩小）转换为原始来源代码。

对于开发，我将此选项设置为eval-source-map或cheap-eval-source-map，对于生产，我要么将其关闭，要么使用source-map生成单独的源地图文件。

Answer 3

现在更新了你必须包括模式：＆＃34;开发＆＃34;在module.exports的顶部，并在.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: {}
}

check

使用bundle.js时在浏览器中重新调试

3 个答案: