在vuecli中使用UglifyJsPlugin导致打包失败原因
今天在配置vue打包的时候发现使用了UglifyJsPlugin打包报错导致打包失败在网上找了好多原因大部分都是安装es2015的版本对当前代码的js进行降级处理,以及部分node_modules中的包需要进行降级处理,实践后发现并不适用我当前的情况,最终找到两种解决办法: (当前使用vue-cli4.0)在vue.config.js中配置1、使用UglifyJsPlugin的beta版在 Ugl
今天在配置vue打包的时候发现使用了
UglifyJsPlugin
打包报错导致打包失败
在网上找了好多原因大部分都是安装es2015的版本对当前代码的js进行降级处理,以及部分node_modules中的包需要进行降级处理,
实践后发现并不适用我当前的情况,最终找到两种解决办法
: (当前使用vue-cli4.0)
在vue.config.js
中配置
1、使用
UglifyJsPlugin的beta版
在 UglifyJs 的 githubissues #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
]
})
}
更多推荐
所有评论(0)