执行npm run build遇UglifyJs Unexpected Token错误，npm run watch却正常

阿华AIGC实验室

2026-5-25

解决npm run build报UglifyJs语法错误，但watch模式正常的问题

兄弟，我太懂你这种情况了！明明npm run watch编译顺顺利利，一执行npm run build就被UglifyJs的错误卡脖子，简直头大。咱们来一步步拆解问题：

问题根源

你的build脚本用了webpack -p参数，这个参数会自动触发webpack内置的旧版UglifyJsPlugin来压缩代码，但这个老版本的UglifyJs只能处理ES5语法。如果你的代码（或者依赖的第三方包）里有ES6+的新语法（比如对象最后一个属性后的逗号、箭头函数、解构赋值这类），它就会识别不了，直接抛出Unexpected token的错误。

而watch模式用了-d（开发模式），webpack只做打包转译，不会启用代码压缩，自然不会触发UglifyJs的语法检查，所以能正常跑起来。

解决方案

1. 替换成支持ES6+的压缩工具

旧版UglifyJs已经被淘汰了，换成terser-webpack-plugin就行，它是官方推荐的替代工具，完美支持ES6+语法：

先安装依赖：

npm install terser-webpack-plugin --save-dev

然后修改你的webpack.prod.config.js，手动配置压缩插件：

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

module.exports = {
  // ...你的其他webpack配置
  optimization: {
    minimizer: [new TerserPlugin()]
  }
};

最后把build脚本里的-p参数去掉（因为-p会自动启用旧的UglifyJs），修改后的脚本：

"scripts": {
  "build": "webpack --define process.env.NODE_ENV='\"production\"' --progress --colors --config ./webpack.prod.config.js",
  "watch": "webpack-dev-server -d --hot --inline --define process.env.NODE_ENV='\"development\"' --config ./webpack.dev.config.js"
}

2. 确保Babel转译了所有ES6+代码

如果你的代码里有未被Babel转译的ES6语法，也会导致压缩失败。检查你的webpack配置里的babel-loader：

module: {
  rules: [
    {
      test: /\.js$/,
      // 如果某些第三方依赖也用了ES6语法，要把它们从exclude里排除，比如：exclude: /node_modules\/(?!lodash-es)/
      exclude: /node_modules/,
      use: 'babel-loader'
    }
  ]
}

同时确认你的.babelrc或者babel配置文件里，已经包含了转译ES6的预设（比如@babel/preset-env）。