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']

這幾個屬性就可以了。