在vuecli中使用UglifyJsPlugin导致打包失败原因

今天在配置vue打包的时候发现使用了UglifyJsPlugin打包报错导致打包失败
在网上找了好多原因大部分都是安装es2015的版本对当前代码的js进行降级处理，以及部分node_modules中的包需要进行降级处理，
实践后发现并不适用我当前的情况，最终找到两种解决办法： （当前使用vue-cli4.0）

在vue.config.js中配置

1、使用UglifyJsPlugin的beta版
在 UglifyJs 的 github issues #78 找到了这样一个解决方案：
由于 UglifyJs 只支持 ES5 而element-ui可能引入了一部分 ES6 的写法，所以导致 webpack 打包失败。issue 里最后给出的解决方案是用 beta版本的Uglify-es 来代替 UglifyJs（Beta 版本引入了对 ES2015+）的支持。需要在前端工作目录下用执行命令
npm i -D uglifyjs-webpack-plugin@beta。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
configureWebpack: (config) => {
			//引用
            config.plugins.push(
                new UglifyJsPlugin({
                    uglifyOptions: {
                        compress: {
                            drop_console: true,// 注释console
                            drop_debugger: false, // 注释debugger
                            pure_funcs: ["console.log"] //移除console
                        },
                        // warnings: false,
                        mangle: false,
                        output: {
                            beautify: true //压缩注释
                        }
                    },
                    sourceMap: false,// 去除打包后生成的.map文件
                    parallel: true
                }),
            );
            Object.assign(config, {
                // 插件配置
                plugins:[
                    ...config.plugins
                ]
            })

    }

2、使用terser-webpack-plugin （npm i terser-webpack-plugin）
因为uglifyjs不支持es6语法，所以用terser-webpack-plugin替代uglifyjs-webpack-plugin
terser-webpack-plugin 目前最新的版本打包会有兼容问题请使用4.2.3版本（20201130）
terser-webpack-plugin的5.x版本是对应webpack5.x所以如果打包失败注意下版本哦

//压缩代码并去掉console es6
const TerserPlugin = require('terser-webpack-plugin')

configureWebpack: (config) => {
			let optimization = {
                runtimeChunk: 'single',
                splitChunks: {
                    chunks: 'all',
                    maxInitialRequests: Infinity,
                    minSize: 20000,
                    cacheGroups: {
                        vendor: {
                            test: /[\\/]node_modules[\\/]/,
                            name (module) {
                                // get the name. E.g. node_modules/packageName/not/this/part.js
                                // or node_modules/packageName
                                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                                // npm package names are URL-safe, but some servers don't like @ symbols
                                return `npm.${packageName.replace('@', '')}`
                            }
                        }
                    }
                },
                // 具体代码
                minimize: true,
                minimizer: [new TerserPlugin({
                    parallel: true,
                    sourceMap: true,
                    terserOptions: {
                        warnings: false,
                        compress: {
                            drop_console: true,// 注释console
                            drop_debugger: true, // 注释debugger
                            pure_funcs: ["console.log"]
                        }
                    }
                })]

            };

            Object.assign(config, {
             	optimization,
                // 插件配置
                plugins:[
                    ...config.plugins
                ]
            })

    }

参考链接