webpack4.x——htmlWebpackPlugin的minify各配置项用法说明

末蓝、 2022-04-16 01:52 1721阅读 0赞

htmlWebpackPlugin中内置了html-minifier，这个插件多用于页面资源压缩，但是常用的配置说明不太容易理解（而且所有配置默认是不起效的），故本文将对常用的配置进行补充说明。

示例源码：[https://github.com/liqing-taoyanzoukaila/webpack4-htmlWebpackPlugin-minify][https_github.com_liqing-taoyanzoukaila_webpack4-htmlWebpackPlugin-minify]

参考文档：[https://github.com/kangax/html-minifier\#options-quick-reference][https_github.com_kangax_html-minifier_options-quick-reference]  
中文API请点这里：[传送门][Link 1]

### removeComments（默认值false） ###

清理html中的注释。

下面先贴一下webpack.config内容（minify的配置基本都是键值对，类似于下面的removeComments: true，故后面的配置项就不再重复贴webpack.config内容了，有兴趣的同学可以直接去git上下源码查看）

构建以后的对比（构建后注释被清理了，但注释的位置会以空行的方式保留）：  
![在这里插入图片描述][20181115145932222.png]

### collapseWhitespace（默认值false） ###

清理html中的空格、换行符。

构建以后的对比（构建后注释的空行也被清理了，但span元素内字符串包含的空格没有被清理，只有头部和尾部的空格被清理）：  
![在这里插入图片描述][20181115154433836.png]

### minifyCSS（默认值false） ###

压缩html内的样式。

构建以后的对比（构建后html内的样式，无论是写在style标签内还是直接写在元素上的样式，包含的空格、换行和最后一个分号都被清理了）：  
![在这里插入图片描述][20181115160027820.png]

### minifyJS（默认值false） ###

压缩html内的js。

构建以后的对比（这个配置项似乎没有生效，js没有变化，有知道原因的同学请留言，谢谢）：  
![在这里插入图片描述][20181115161900460.png]

### removeEmptyElements（默认值false） ###

清理内容为空的元素。

构建以后的对比（构建后内容为空的元素被清理了，但这个功能慎用，空元素可能用于占位或在js逻辑里有填充动作）：  
![在这里插入图片描述][20181115164104385.png]

### caseSensitive（默认值false） ###

以区分大小写的方式处理自定义标签内的属性。

构建以后的对比（构建后属性名未发生变化，如果使用默认值，则构建后属性会被转成全小写）：  
![在这里插入图片描述][2018111516553241.png]

### removeScriptTypeAttributes（默认值false） ###

去掉script标签的type属性。

构建以后的对比（构建后script标签的type属性被清理，包括inject的script也不再包含type属性，不过从可靠性考虑不建议设置这个配置项，因为用户浏览器的默认脚本解析语言可能被改成vbscript或者其他，虽然概率很低）：  
![在这里插入图片描述][20181115171445721.png]

### removeStyleLinkTypeAttributes（默认值false） ###

去掉style和link标签的type属性。

构建以后的对比（构建后style和link标签的type属性被清理）：  
![在这里插入图片描述][2018111517214538.png]

*备注：html-minifier还包含有其他一些配置项，部分配置项验证后发现配置无效（类似上面的minifyJS），还有部分不理解用法或使用场景，欢迎各位同学补充。*

[https_github.com_liqing-taoyanzoukaila_webpack4-htmlWebpackPlugin-minify]: https://github.com/liqing-taoyanzoukaila/webpack4-htmlWebpackPlugin-minify
[https_github.com_kangax_html-minifier_options-quick-reference]: https://github.com/kangax/html-minifier#options-quick-reference
[Link 1]: http://www.cnblogs.com/YangJieCheng/p/8302975.html
[20181115145932222.png]: /images/20220416/ff2f0f1ddc5c4281a34b150166b118b1.png
[20181115154433836.png]: /images/20220416/50326717661e49bcabe5ee1b80d933f7.png
[20181115160027820.png]: /images/20220416/9b96398d70da4876a8ca1cb07d18a7fe.png
[20181115161900460.png]: /images/20220416/15fb56b708214c3db1123cc97ac39dae.png
[20181115164104385.png]: /images/20220416/8da90a5df8e54a0981fc6fc4a67877b8.png
[2018111516553241.png]: /images/20220416/122dcd62bbdc4b1e93148cdde1cde6b2.png
[20181115171445721.png]: /images/20220416/da17bf5201ab4eb88168f1e4b0ad08cf.png
[2018111517214538.png]: /images/20220416/f0b1ee301bc24551b50276f537ccabd4.png