vue cli 3.0 如何配置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的详细说明。

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

感谢@拂星大佬的解答。