使用webpack构建在不同环境下对console.*使用

在我们开发项目时，不同环境对console.*的输出需求是不一样的。

生成环境一般是不需要console.log的，而开发环境是需要的

在开发环境中，一般我们只希望控制台输出console.log，可以使用transfrom-remove-console

1.安装插件

// 插件版本要和webpack的版本匹配
npm i -D babel-plugin-transfrom-remove-console

        官方文档里解释这个插件可以移除所有console.*的调用

2.找到babel的配置文件

        这里的exclude是可以保留打印的，可按需加入，比如还需要error的加在数组里就可以了

// 这是项目发布阶段需要用到的bebel插件
const prodPlugins = []
//如果是开发环境，自动清理掉打印的日志，但保留log
if (process.env.NODE_ENV === 'development') {
    prodPlugins.push([
      'transform-remove-console',{
        exclude: ['log']
      }  
  ])
}
module.exports = {
 ...,
  plugins: [
    ...,
    ...prodPlugins
  ]
}

在生成环境中，是不需要console.*还有debugger的，可以使用UglifyJsPlugin来做console.*和debugger的清除，减少体积

1.安装插件

npm i -D uglifyjs-webpack-plugin

2.找到vue.config.js的配置文件

//vue.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
   ..., 
   configureWebpack: config => {
       ..., 
       // 为生产环境修改配置
        if (process.env.NODE_ENV === 'production') { 
            // 使用UglifyJsPlugin去掉console 可以略微降低文件大小
            new UglifyJsPlugin({
              uglifyOptions: {
                compress: {
                  drop_debugger: true,    //生产环境自动删除debugger
                  drop_console: true,      //生产环境自动删除console
                },
                warnings: false,
              },
              sourceMap: false,
              parallel: true
            })
        } 
   }
}