Webpack生产构建报错：Module build failed语法错误，求排查配置问题

嘿，我帮你拆解下这个问题：你遇到的SyntaxError: Unexpected token（卡在JSX的<Pro...这里），本质是生产构建时Webpack没有正确转译JSX语法——毕竟开发模式能正常运行，说明开发配置里的Babel/loader设置是对的，问题肯定出在生产配置的遗漏上。

下面是几个最常见的原因和对应的修复步骤：

1. 生产配置没加JSX转译规则 #

先检查你的webpack.config.js生产环境配置里的module.rules，是不是漏掉了处理.jsx文件的babel-loader规则？开发模式里应该有类似下面的配置，但生产模式可能没同步过去：

module: {
  rules: [
    {
      // 匹配js和jsx文件
      test: /\.(js|jsx)$/,
      // 跳过node_modules，提升构建速度
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          // 必须包含react预设才能转译JSX
          presets: ['@babel/preset-env', '@babel/preset-react']
        }
      }
    }
  ]
}

如果生产配置里没有这条，赶紧加上。另外别忘了确认@babel/preset-react已经安装，没装的话跑这个命令：

npm install @babel/preset-react --save-dev

2. Babel配置没被生产环境正确读取 #

如果你用的是.babelrc或者babel.config.json这类外部配置文件，要确认它没有被生产环境的配置忽略。或者干脆在生产配置的babel-loader里直接指定presets，避免依赖外部配置可能的环境差异。

3. 旧版压缩插件不兼容JSX #

要是你在生产配置里用了UglifyJsPlugin这类旧压缩插件，它对ES6+和JSX语法的支持很差，很可能导致转译后的代码出错。建议换成Webpack 4+默认内置的terser-webpack-plugin，它能完美处理现代JS语法：
不要用旧的写法：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
// ...
plugins: [new UglifyJsPlugin()]

改成这样（Webpack 5+其实默认已经用Terser了，也可以显式配置）：

const TerserPlugin = require('terser-webpack-plugin');
// ...
optimization: {
  minimizer: [new TerserPlugin()]
}

4. 扩展名配置漏了.jsx #

最后检查生产配置的resolve.extensions，确保包含了.jsx，不然Webpack可能找不到你的JSX入口文件：

resolve: {
  extensions: ['.js', '.jsx']
}

快速验证步骤 #

1. 直接对比开发和生产配置的module.rules，找出生产配置里缺失的JSX处理规则；
2. 确认@babel/preset-react已安装并在配置中启用；
3. 替换旧压缩插件为Terser（如果在用的话）。

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