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

Question

工具:Chrome开发者工具,ReactJs和Webpack

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

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

Answer 1

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

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

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答案和发布的图像,我终于找到了该文件夹所在的位置.

配置webpack以允许浏览器调试

Answer 2

您可以使用该devtool选项让webpack生成源地图,(在Chrome devtools选项中启用时)将允许Chrome将代码bundle.js(甚至可能缩小)转换为原始源代码.

对于开发,我将此选项设置为eval-source-map或cheap-eval-source-map,对于生产我要么关闭它,要么生成单独的源映射文件source-map.

Answer 3

它现在更新了，您只需在 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: {}
}

查看