問題描述

近期，抽離一個業(yè)務(wù)性的組件庫，需要從0到1實現(xiàn)打包過程。在實現(xiàn)過程中，配置treser-webpack-plugin的drop_console:true,打包之后，控制臺任然有打印內(nèi)容，然后查看打包之后的js文件，發(fā)現(xiàn)還存console。

解決問題

檢查是因為webpack-config.js的devtool未設(shè)置，我的打包命令的mode=development, 此時sourceMap默認(rèn)值為eval, 打包之后的js是包含了源碼字符串。terser-webpack-plugin不會處理源碼字符串中的console、備注、空格等。

所以需要將devtool設(shè)置terse-webpack-plugin支持的選項：source-map,inline-source-map...

terser-webpack-plugin

關(guān)于 source maps 說明

只對 devtool 選項的 source-map，inline-source-map，hidden-source-map 和 nosources-source-map 有效。
為何如此？

• eval 會包裹 modules，通過 eval("string")，而 minimizer 不會處理字符串。
• cheap 不存在列信息，minimizer 只產(chǎn)生單行，只會留下一個映射。
  使用支持的 devtool 值可以生成 source map。

關(guān)于devtool

mode=development: devtool的默認(rèn)值為eval

mode=production:devtool的默認(rèn)值為false

參考文章

關(guān)于 webpack 打包后文件過大的那些事……