vue-cli3.0 生产包去除console.log

目前负责的公众号又迭代了一个版本，之前打生产包，配置总是和测试包搞混，所以使用了vue-cli3.0的环境变量来控制配置。

但是又发现了一个新问题，写代码的过程中写了很多console.log 来调试代码，但是生产包里显示这些调试信息又有些不合适，所以想在打生产包的时候去除代码中的console.log.

网络上一顿搜索之后，使用了uglifyjs-webpack-plugin来进行压缩优化，但是遇到了Unexpected token: name ***的报错，又是一番查询之后，有说这个插件不支持es6之后的语法，但是vue-cli3.0使用的是babel-preset-env,默认的配置就包含了babel-preset-es2015。又有说问题出在Swiper4插件，说退回Swipwe3就能解决问题，但是现在Swiper4插件用到的一些API,Swiper3根本就没有，改起来太麻烦了。

最后搜索发现vue-cli3.0在打包过程中就使用了terser-webpack-plugin插件进行优化，具体配置可以node_modules/@vue/cli-service/lib/config/prod.js中看到。

if (process.env.VUE_CLI_TEST) {
  webpackConfig.optimization.minimize(false)
} else {
  const TerserPlugin = require('terser-webpack-plugin')
  const terserOptions = require('./terserOptions')
  webpackConfig.optimization.minimizer([
    new TerserPlugin(terserOptions(options))
  ])
}

这里使用了环境变量进行控制，只有打生产包的时候才会调用这个插件进行打包优化。

terser-webpack-plugin的具体配置在同一个文件夹下terserOptions.js中，只要在这个文件中compress对象加入

warnings: false,
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log']

这几个属性就可以了。

转载于:https://www.cnblogs.com/KlllB/p/10682262.html