terser-webpack-plugin drop_console未生效？

问题描述

近期，抽离一个业务性的组件库，需要从0到1实现打包过程。在实现过程中，配置treser-webpack-plugin的drop_console:true,打包之后，控制台任然有打印内容，然后查看打包之后的js文件，发现还存console。

解决问题

检查是因为webpack-config.js的devtool未设置，我的打包命令的mode=development, 此时sourceMap默认值为eval, 打包之后的js是包含了源码字符串。terser-webpack-plugin不会处理源码字符串中的console、备注、空格等。

所以需要将devtool设置terse-webpack-plugin支持的选项：source-map,inline-source-map...

terser-webpack-plugin

关于 source maps 说明

只对 devtool 选项的 source-map，inline-source-map，hidden-source-map 和 nosources-source-map 有效。
为何如此？

• eval 会包裹 modules，通过 eval("string")，而 minimizer 不会处理字符串。
• cheap 不存在列信息，minimizer 只产生单行，只会留下一个映射。
  使用支持的 devtool 值可以生成 source map。

关于devtool

mode=development: devtool的默认值为eval

mode=production:devtool的默认值为false

参考文章

关于 webpack 打包后文件过大的那些事……