在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console。如果手动删除未免也太累了,再说以后想再开发还得重新写console。webpack提供了删除console的插件,这里分两种:
vue-cli2 生成环境去除console.log
1. 项目build 下面webpack.prod.config.js 文件中:
plugins: [
new webpack.DefinePlugin({
'process.env': env
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
//drop_console 传递true以放弃对控制台的调用。*功能
drop_console: true,
// pure_funces 禁用console.log函数
pure_funcs: ['console.log']
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
......
]
注意:搜索plugins 这个下面,UglifyJsPlugin 默认已经安装了,只需要添加 drop_console: true, pure_funcs: ['console.log']
代码参照如上即可, 我就是这样添加的.
vue-cli3 生成环境去除console.log
1. 只有vue.config.js 里配置.
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
configureWebpack: {
//注释console
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
// warnings: false,
drop_console: false, //注释console
drop_debugger: false,
pure_funcs: ['console.log'] //移除console
}
}
})
]
}
}
2. 需先安装 uglifyjs-webpack-plugin 插件
npm install uglifyjs-webpack-plugin --save-dev
注意: npm run build 打包报错,提示UglifyJs Unexpected token: keyword «const» ......
UglifyJs
当前的版本不支持es6
的写法,其中一种解决的办法就是升级更新UglifyJs的版本
npm i uglifyjs-webpack-plugin@1
如果提示出错可以改用淘宝镜像来安装
cnpm i uglifyjs-webpack-plugin@1
安装好之后就可以使用npm run build
以上配置就这么多,如果还有问题,可以加入扣扣群:316567839