Chrome Sources标签显示不可读代码？React+Webpack配置问题排查

你遇到的问题是因为Webpack默认不会自动生成Source Map文件，导致浏览器无法将编译后的混淆代码映射回你的原始代码。以下是具体的修复方案：

1. 添加Source Map配置 #

在Webpack配置的根对象中加入devtool选项，根据运行环境选择合适的映射模式：

• 本地开发时，用eval-cheap-module-source-map：编译速度快，能精准映射原始代码的行号，调试体验好
• 生产构建时，用source-map：生成独立的.map文件，不会嵌入到生产代码中，不影响运行性能

修改后的配置示例：

module.exports = (env) => {
  const isProduction = env?.production;
  return {
    entry: "./src/index.js",
    output: {
      path: `${__dirname}/dist`,
      publicPath: "/",
      filename: "sei-chat.js",
      library: "SEIChat",
      libraryTarget: "umd",
      umdNamedDefine: true,
    },
    // 新增devtool配置
    devtool: isProduction ? 'source-map' : 'eval-cheap-module-source-map',
    plugins: [
      new HTMLWebpackPlugin({
        template: "./public/index.html",
      }),
    ],
    module: {
      rules: [
        // 原有rules配置...
      ]
    },
  };
};

2. 修复source-map-loader的匹配规则 #

你当前配置里的test: /\.js#/是错误的，这个规则无法匹配到任何文件。正确的写法应该是匹配.js.map后缀的source map文件，修改后：

{
  test: /\.js\.map$/,
  enforce: "pre",
  use: ["source-map-loader"],
}

3. 确保启动命令对应正确环境 #

在package.json的scripts里配置明确的环境启动命令，避免Webpack默认用生产模式编译：

{
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  }
}

完成以上配置后，重新启动项目，Chrome的Sources标签里就能看到和你本地代码一致的文件了，直接在原始代码里打断点调试即可。

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