Name expected [js/chunk-4b5816b5.0950b124.js:250,6] from UglifyJs

问题

vue 项目可以正常启动运行，但是使用 vuecli3 打包时却 js 报错，项目里使用了 html2canvas 跟 jspdf，然后打包里面使用了 ​​uglifyjs-webpack-plugin​​。

原因跟解决方案

因为 ​​uglifyjs-webpack-plugin​​​ 不支持新的 es6 语法，解决方法就是使用 ​​terser-webpack-plugin@4.2.3​​​ 替换 ​​uglifyjs-webpack-plugin@2.2.0​​ 即可。

​​vue.config.js​​​ 的 ​​uglifyjs-webpack-plugin@2.2.0​​ 配置

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.minimizer = [
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: true, // 删除注释
            },
            warnings: false,
            compress: {
              drop_console: true,
              drop_debugger: true, // 删除debugger
              pure_funcs: ["console.log"],
            }
          }
        })
      ];
    }
}

改成 ​​vue.config.js​​​ 的 ​​terser-webpack-plugin@4.2.3​​ 配置，注意这里需要用 4.x 版本的

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

configureWebpack: config => {
  if (process.env.NODE_ENV === 'production') {
    config.optimization.minimize = true;
    config.plugins.push(
      new TerserPlugin({
        test: /\.js(\?.*)?$/i, // 匹配参与压缩的文件
        parallel: true, // 使用多进程并发运行
        terserOptions: {
          // Terser 压缩配置
          output: { comments: false },
          compress: {
            drop_debugger: true,
            drop_console: true,
            pure_funcs: ['console.log']
          }
        }
      })
    );
  }
}