terser-webpack-plugin drop_console未生效?

335 阅读1分钟

问题描述

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

解决问题

检查是因为webpack-config.jsdevtool未设置,我的打包命令的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-mapinline-source-maphidden-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 打包后文件过大的那些事……