执行Webpack生产构建时Terser Plugin报Unexpected token错误求助

核心原因 #

报错里的<运算符大概率是未被Babel转译的JSX语法，或是ES6+语法未被处理，导致Terser无法解析原始代码。

排查与解决方案 #

1. 确认Webpack中Babel Loader的作用范围 #

检查webpack.prod.js的module.rules配置，确保babel-loader覆盖所有需要转译的文件：

• 规则要匹配.js和.jsx后缀（如果项目用了JSX）
• include明确指向src目录，避免遗漏目标文件
• 不要误将业务文件加入exclude

示例正确配置：

const path = require('path');

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};

2. 验证Babel预设配置 #

检查.babelrc或babel.config.json，确保包含处理JSX和ES6+的预设：

• 若项目基于React，必须添加@babel/preset-react
• @babel/preset-env负责转译ES6+语法到目标环境兼容版本

示例.babelrc配置：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      }
    }],
    "@babel/preset-react"
  ]
}

同时确认已安装所有依赖包：

npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

3. 调整TerserPlugin配置 #

确保Terser版本与Webpack版本兼容：

• Webpack 5自带TerserPlugin，无需单独安装；Webpack 4需安装terser-webpack-plugin@4
• 在Terser配置中指定ECMA版本，匹配转译后的代码版本

示例Webpack 4的Terser配置：

const TerserJSPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new TerserJSPlugin({
        terserOptions: {
          ecma: 2015,
          parse: { ecma: 2015 },
          compress: { ecma: 2015 }
        }
      })
    ]
  }
};

4. 排查业务代码语法问题 #

检查src/index.js和src/components/App/index.js：

• 确认JSX标签是否闭合，有无语法错误（比如<div>未写对应闭合标签）
• 若使用.js后缀编写JSX，确保Webpack规则能识别.js文件并交给Babel处理

验证步骤 #

1. 先执行webpack --config webpack.prod.js --mode development，查看输出的未压缩代码是否包含原始JSX/ES6+语法，若有则说明Babel转译未生效
2. 修正Babel或Webpack配置后，重新执行生产构建命令

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