vue-cli-30-如何配置webpack去掉console函数以及文档简略说明

背景描述

最近发现 build 后的代码还有 console，又不愿意每个页面去删除 console，想想 webpack 这么牛叉的工具，自动删除 console 的功能应该有的。遂求谷歌、度娘，最后，在 sf 问答中找到答案。贴上问答链接。vue cli 3.0 文件压缩如何去掉 console.log。解决代码如下。

configureWebpack: config => {if (process.env.NODE_ENV === 'production') {config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
    }
}

代码很简单，判断下是否是 production 环境就行。但是 config.optimization.minimizer[0].options.terserOptions.compress.drop_console 这行代码是个啥呢？为什么要这样写呢？有相关文档说明吗？后来再次求了下谷歌、度娘，找到了答案。

代码说明

configureWebpack 是 vue cli 的配置项。可以是一个对象或者一个函数，具体文档说明请看 vue cli 官方文档说明：configurewebpack 官方文档。在这里，我们使用的是一个函数，用来修改 webpack 配置。

config想必就是 webpack 的整体配置对象了。optimization应该就是配置的选项，但是这玩意没见过啊，赶紧去翻翻 webpack 文档，最后搜索到此配置项。见下图。

贴上链接：optimization 官方文档。

从官方文档上我们可以看到：optimization.minimizer 允许你通过提供一个或多个定制过的 TerserPlugin 实例，覆盖默认压缩工具(minimizer)。那就说明 minimizer 是所有压缩工具的集合，它的每一个元素都是一个压缩工具，即是 TerserPlugin 这个插件的一个实例。

继续找到 terser-webpack-plugin 插件 github 地址，查看此插件配置说明。

minimizer[0]应该就是第一个压缩工具。minimizer[0].options就是第一个压缩工具的所有选项对象。minimizer[0].options.terserOptions就是第一个压缩工具的 terserOptions 选项对象。所以我们要找到插件的 terserOptions 选项说明。

这里有个疑问，为啥 minimizer[0]要取 0 呢？第二个不行吗？还是说 webpack 默认只有一个压缩工具？麻烦知道的大佬说明下。我这里暂时就不深究了。

找到示例代码如下

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          ecma: undefined,
          warnings: false,
          parse: {},
          compress: {},
          mangle: true, // Note `mangle.properties` is `false` by default.
          module: false,
          output: null,
          toplevel: false,
          nameCache: null,
          ie8: false,
          keep_classnames: undefined,
          keep_fnames: false,
          safari10: false,
        },
      }),
    ],
  },
};

查看 default，找到 compress 配置项。再找到 compress 详细说明。最后可以找到 drop_console 的详细说明。

至此，已经找到全部说明文档。我就说嘛，一个配置不会凭空出现，肯定会有相应的文档说明的。

感谢 @拂星大佬的解答。