Webpack V4：如何使用Webpack和Uglify移除console.logs？

嘿，我升级Webpack4的时候也踩过这个坑！之前用webpack.optimize.UglifyJsPlugin的方案确实失效了，因为Webpack4把代码压缩相关的配置整合到config.optimization里了，不再单独暴露那个插件了。下面给你两种可靠的解决办法：

方法一：使用Webpack4内置的TerserPlugin（推荐） #

Webpack4在生产环境下默认会启用TerserPlugin来压缩代码，我们只需要在配置里给它加上移除console的参数就行：

在你的webpack.config.js的生产环境配置中，添加或修改optimization字段：

module.exports = {
  // ...其他配置
  mode: 'production',
  optimization: {
    minimizer: [
      new require('terser-webpack-plugin')({
        terserOptions: {
          compress: {
            drop_console: true, // 移除所有console语句
            // 如果只想移除console.log，保留其他console方法（比如console.error），可以用：
            // pure_funcs: ['console.log']
          }
        }
      })
    ]
  }
};

注意：如果你的Webpack版本是4.x早期版本，可能需要单独安装terser-webpack-plugin，执行npm install terser-webpack-plugin --save-dev即可。

方法二：手动引入UglifyJsPlugin（兼容旧习惯） #

如果你还是想用UglifyJsPlugin，Webpack4把它移到了单独的包uglifyjs-webpack-plugin里，需要先安装：

npm install uglifyjs-webpack-plugin --save-dev

然后在配置文件里这样用：

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

module.exports = {
  // ...其他配置
  mode: 'production',
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            drop_console: true,
            // 或者用pure_funcs: ['console.log']精准移除指定console方法
          }
        }
      })
    ]
  }
};

小提示 #

• 记得只有在生产环境下才开启这个配置，开发环境保留console.log方便调试。
• pure_funcs: ['console.log']比drop_console更精准，它只会移除console.log调用，而drop_console会移除所有console相关语句（比如console.warn、console.error）。

内容的提问来源于stack exchange，提问作者dude