webpack4.x 使用 UglifyJS 出错问题

webpack

问题

webpack 中使用 UglifyJS 压缩代码时，出现如下错误。

ERROR in admin.b996c1979478ca946548.bundle.js from UglifyJs
Unexpected token: keyword (const) [src/components/Alerts.vue:36,0][admin.b996c1979478ca946548.bundle.js:740,6]

原因

从出错信息来看，是 UglifyJS 不支持 ES6 的语法。理论上不应该啊。于是 Google 之，发现 uglifyjs-webpack-plugin 2.0 版本的 Release 日志中，明确提示重新切换回到 uglify-js，因为 uglify-es 被废弃了，如果需要 ES6 代码压缩，请使用 terser-webpack-plugin。

解决

方法一

使用 Babel 将 ES6 转换为 ES5。

方法二

安装并使用 terser-webpack-plugin

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

在 webpack 中，添加如下配置。

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

module.exports = {
  //...
  optimization: {
    minimizer: [new TerserPlugin()]
  }
};

此外，在我的项目中，override 了压缩选项，丢弃控制台输出，所以最后的配置如下。

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

module.exports = {
	//...
	optimization: {
		minimizer: [new TerserPlugin(
			terserOptions: {
				compress: {
					drop_console: true,
					pure_funcs: ['console.log'],
				},
			},
		)]
	}
};

参考