terser-webpack-plugin drop_console未生效?

问题描述

近期,抽离一个业务性的组件库,需要从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-mapnosources-source-map 有效
为何如此?

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

关于devtool

mode=development: devtool的默认值为eval

mode=production:devtool的默认值为false

参考文章

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。