vuecli3项目中webpack4配置（一）去除console.log

1. 正式环境去除console.log

如果在正式环境中需要去掉console.log,如果你发现设置terserOptions没有效果，要从源头分析下原因了。

1） 可能是vue-cli的版本不是最新的，例如我司一个项目中用的cli-service@3.0.5,另一个项目用的cli-service@3.1.1看他们在正式环境的不同配置（@vue\cli-service\lib\config\prod.js）：

cli-service@3.0.5
const UglifyPlugin = require('uglifyjs-webpack-plugin')
const uglifyOptions = require('./uglifyOptions')
webpackConfig.optimization.minimizer([
     new UglifyPlugin(uglifyOptions(options))
])

cli-service@3.1.1
const TerserPlugin = require('terser-webpack-plugin')
const terserOptions = require('./terserOptions')
webpackConfig.optimization.minimizer([
    new TerserPlugin(terserOptions(options))
])

用的是两个不同的压缩插件，所以在配置时也要区分处理

cli-service@3.0.5
configureWebpack: config => {
    if(process.env.NODE_ENV === 'production'){
        config.optimization.minimizer[0].options.uglifyOptions.compress.warnings = false;
        config.optimization.minimizer[0].options.uglifyOptions.compress.drop_console = true;
        config.optimization.minimizer[0].options.uglifyOptions.compress.drop_debugger = true;
        config.optimization.minimizer[0].options.uglifyOptions.compress.pure_funcs = ['console.log'];
    }
}

cli-service@3.1.1
configureWebpack: config => {
    if(process.env.NODE_ENV === 'production'){
      config.optimization.minimizer[0].options.terserOptions.compress.warnings = false;
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
      config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true;
      config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log'];
    }
}

2）configureWebpack不是配置的一个函数而是一个对象。webpack文档中说明如果configureWebpack为一个对象，该对象将会被 webpack-merge 合并入最终的 webpack 配置。如果configureWebpack为一个函数，你可以基于环境有条件地配置，或者直接修改配置。可见对象会被merge函数是直接修改配置。如果将上面if语句中的代码放在chainWebpack进行配置，就会报'options' of undefined的错误。此时就要借助babel-plugin-transform-remove-console插件了。

babel.config.js
const plugins = [[
  "component",
  {
    "libraryName": "element-ui",
    "styleLibraryName": "../packages/theme-chalk/src",
    "ext":".scss"
  }
]]
if(process.env.NODE_ENV === 'production') {
  plugins.push("transform-remove-console")
}
module.exports = {
  "presets": [["@vue/app"]],
  "plugins": plugins
}

3）如果还是没有成功的话，就要检查一下自己的webpack配置中有没有重写optimization了。 可以通过命令vue inspect --mode=production > output.js来查看当前webpack的所有配置。