如何在Webpack4中添加插件自动去掉console

在原来webpack4之前，大家的主流做法是通过webpack的混淆配置来实现

new webpack.optimize.UglifyJsPlugin({

     // Eliminate comments
        comments: false,

    // Compression specific options
       compress: {
         // remove warnings
            warnings: false,

         // Drop console statements
            drop_console: true
       },
    })

在webpack4后可以通过插件（terser-webpack-plugin）来实现该功能

首先安装插件

$ npm install terser-webpack-plugin --save-dev

在配置文件webpack.config.js中进行设置

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        sourceMap: true, // Must be set to true if using source-maps in production
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      }),
    ],
  },
};

如此便可自动去除console.log这样的调试配置。

参考：https://stackoverflow.com/questions/41040266/remove-console-logs-with-webpack-uglify