在长时间无意义地使用一堆打印语句之后，我终于回去想出了如何做到这一点。

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

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 以允许浏览器调试

您可以使用该devtool选项让 webpack 生成源映射，该选项（在 Chrome devtools 选项中启用时）将允许 Chrome 将代码bundle.js（甚至可能被缩小）转换为原始源代码。

对于开发，我将此选项设置为eval-source-map或cheap-eval-source-map，而对于生产，我要么关闭此选项，要么生成带有source-map.

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

查看