webpack配置sourcemap后浏览器无法查看未转译源码调试，如何解决？

1. 开启Babel的SourceMap输出 #

babel-loader默认不会将转译过程的sourcemap传递给webpack，这是你只能看到转译后代码的核心原因，需要两处配置修改：

修改.babelrc，新增sourceMap开关： #

{
  "presets": [
    [ 
      "@babel/preset-env", {
        "modules": "auto",
        "targets": {
          "browsers": [
            "last 2 Chrome versions",
            "last 2 Firefox versions",
            "last 2 Safari versions",
            "last 2 iOS versions",
            "last 1 Android version",
            "last 1 ChromeAndroid version",
            "ie 11"
          ]
        }
      }
    ],
    ["@babel/preset-react"]
  ],
  "compact" : "auto",
  "sourceMaps": true
}

修改webpack.config.js中的babel-loader配置，开启sourceMap： #

{
  test: /\.js$/,
  use: {
    loader: 'babel-loader',
    options: {
      sourceMap: true
    }
  },
  exclude: path.resolve(__dirname, 'node_modules/'),
}

2. 调整webpack devtool与路径配置 #

开发环境推荐使用eval-cheap-module-source-map作为devtool配置，该配置编译速度快，可直接保留原始未转译的源码，无需生成独立.map文件，避免路径匹配问题：

// webpack.config.js
devtool: 'eval-cheap-module-source-map',

如果你需要生成独立的.map文件，需要确保output.publicPath和dist文件夹的实际部署路径一致，你当前file-loader使用的部署路径为/wp-content/plugins/myplugin/lib/dist，需同步修改output配置：

output: {
  path: path.resolve(__dirname, '../dist'),
  filename: '[name].js',
  publicPath: '/wp-content/plugins/myplugin/lib/dist/', // 和实际部署路径一致
  library: 'MyLib',
},

3. 确认浏览器调试配置 #

打开浏览器开发者工具，按F1唤起设置面板，确保「启用JavaScript源代码映射」选项处于勾选状态。 #

可选：独立SourceMap插件配置 #

如果你坚持使用SourceMapDevToolPlugin生成独立map文件，需补充完整参数：

devtool: false,
plugins: [
  new webpack.SourceMapDevToolPlugin({
    filename: '[name].js.map',
    publicPath: '/wp-content/plugins/myplugin/lib/dist/', // 对齐部署路径
    module: true,
    columns: false,
    exclude: /node_modules/
  })
]

完成以上配置后重启webpack服务，即可在浏览器开发者工具的Sources面板中，看到未转译的原始React代码，直接打断点调试。

内容的提问来源于stack exchange，提问作者assistbss