一、配置路径
- vue-cli3 在项目目录下的vue.config.js文件里面配置
二、安装插件依赖
yarn add -D terser-webpack-plugin 或 npm install terser-webpack-plugin
三、vue-cli3修改 vue.config.js 文件中进行配置
- 在文件头部引入
//打包配置自动忽略console.log等
const TerserPlugin = require("terser-webpack-plugin");
- 在module.exports下configureWebpack中plugins配置
//打包环境去掉console.log等
new TerserPlugin({
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log'], // 移除console
},
},
}),
- 在vue.config.js文件配置全部如下
//打包配置自动忽略console.log等
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
publicPath: './',
devServer: {
......
},
css:{
......
},
configureWebpack: {
plugins: [
//打包环境去掉console.log
new TerserPlugin({
cache: true,//降版本后添加
sourceMap: false,//降版本后添加
// 多进程
parallel: true,//降版本后添加
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log'], // 移除console
},
},
}),
],
}
}
报错效果如下:TypeError: Cannot read property ‘javascript’ of undefined
解决问题如下:使用版本 “terser-webpack-plugin”: “^4.2.3”
yarn add -D terser-webpack-plugin@4.2.3 或 npm install terser-webpack-plugin@4.2.3
//在new TerserPlugin增加多进程打包速度快点
new TerserPlugin({
cache: true,// 降低版本号后增加
sourceMap: false,//降低版本号后增加
// 多进程
parallel: true,//降低版本号后增加
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log'], // 移除console
},
},
}),