[JavaScript知识库]vue.config.js build打包UglifyJsPlugin清除控制台打印console.log，报错出现`warnings` is not a supported option

前端在开发过程中，为了调试方便经常会用到console.log，开发、测试环境有打印可以，但是生产环境最好不要有，毕竟不友好、也不太美观。

uglifyjs-webpack-plugin

上线到生产环境，我们希望把打印功能全部注销掉，一个个的去注销肯定不现实。既浪费精力，又浪费时间，而且还会有遗漏

这里我们借助 uglifyjs-webpack-plugin去实现

安装

cnpm i uglifyjs-webpack-plugin --save-dev

vue.config.js引用

// vue.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
...
configureWebpack: config => {
    if (process.env.NODE_ENV == 'production') {
    
      config.mode = 'production'
      config.optimization.minimizer = [
        new UglifyJsPlugin({
          uglifyOptions: {
            // 删除注释
			output: {
				comments: false
			},
			// 删除console debugger 删除警告
			compress: {     
				warnings: false,	//	报错的写法  
				drop_console: true, // console
				drop_debugger: false,
				pure_funcs: ['console.log']// 移除console
			}
          }
        })
      ]
    } else {
      // 为开发环境修改配置...
      config.mode = 'development'
    }
   }


...

}

warnings is not a supported option

这里有个知识点，warnings 会出现报错的情况。

有的 UglifyJsPlugin 版本不支持在 uglifyOptions 对象的 compress 中设置 warnings 参数， 而是将 warnings 作为一个属性直接设置在 uglifyOptions 对象中。

如果出现报错。那就按下面的写法，将warnings当做uglifyOptions属性去写就可以了

// vue.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
...
configureWebpack: config => {
    if (process.env.NODE_ENV == 'production') {
    
      config.mode = 'production'
      config.optimization.minimizer = [
        new UglifyJsPlugin({
          uglifyOptions: {
            // 删除注释
			output: {
				comments: false
			},
			// 删除console debugger 删除警告
			compress: {     
				drop_console: true, // console
				drop_debugger: false,
				pure_funcs: ['console.log']// 移除console
			}, 
			warnings: false,	//	这样写就不报错  
          }
        })
      ]
    } else {
      // 为开发环境修改配置...
      config.mode = 'development'
    }
   }


...

}