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

Posted 2022-08-31 凯小默

问题

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']
          
        
      )
    );