使用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頂部的“開發”並在你的.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: {}
}

校驗