Webpack配置问题：无法在React中调试原始源码（JSX等）

嘿，我帮你捋捋这个调试问题——没法在Chrome里用原始JSX源码调试，大概率是Webpack的source map配置、Babel插件或者环境模式没配对，结合你给出的依赖和部分配置，给你几个关键点排查：

1. 配置正确的Webpack Devtool #

要让Chrome识别原始源码，Webpack必须生成对应的source map文件。根据你的环境（开发/生产）选合适的devtool：

• 开发环境：推荐用eval-source-map或者eval-cheap-module-source-map，前者能完整映射原始源码，后者编译更快一点，适合开发时用。
• 生产环境：用source-map，它会生成独立的.map文件，不影响生产代码体积，同时能映射原始源码。

把这个配置加到你的Webpack配置里，还要结合你用的env参数做区分：

const env = require('yargs').argv.env;
const isProduction = env === 'production';

module.exports = {
  // ...其他配置
  mode: isProduction ? 'production' : 'development',
  devtool: isProduction ? 'source-map' : 'eval-source-map',
  // ...
};

2. 确保Babel插件正确启用 #

你已经安装了babel-plugin-transform-react-jsx-source，这个插件的作用就是给JSX元素添加源码位置信息，让调试工具能定位到原始JSX文件。要确保它在你的Babel配置里生效：
如果是用.babelrc文件：

{
  "presets": ["env", "react", "stage-0"],
  "plugins": [
    "lodash",
    "transform-react-jsx-source",
    "transform-runtime"
  ]
}

如果是直接在Webpack的babel-loader里配置：

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ["env", "react", "stage-0"],
          plugins: [
            "lodash",
            "transform-react-jsx-source",
            "transform-runtime"
          ]
        }
      }
    }
  ]
}

注意：babel-plugin-react-transform在Babel 6里虽然能用，但现在更推荐用现代的热重载方案，不过如果你暂时不想换，只要它的配置没问题就不影响调试。

3. 避免开发环境启用压缩插件 #

你用到了UglifyJsPlugin，这个插件会压缩混淆代码，在开发环境启用的话会破坏原始源码的结构，导致source map失效。所以要只在生产环境加载它：

plugins: [
  new HtmlWebpackPlugin(),
  new DuplicatePackageCheckerPlugin(),
  // 只有生产环境才添加压缩插件
  ...(isProduction ? [new UglifyJsPlugin()] : [])
]

4. 检查Chrome开发者工具设置 #

最后确认Chrome的设置：

• 打开Chrome DevTools，点击右上角的三个点 → Settings
• 在Sources分类下，确保Enable JavaScript source maps和Enable CSS source maps都勾选上
• 调试时，在Sources面板里找webpack://目录，里面就是你的原始JSX源码，而不是打包后的bundle文件

按这几个步骤排查下来，应该就能正常用原始JSX源码调试了。

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