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

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

示例源码：https://github.com/liqing-taoyanzoukaila/webpack4-htmlWebpackPlugin-minify

参考文档：https://github.com/kangax/html-minifier#options-quick-reference
中文API请点这里：传送门

removeComments（默认值false）

清理html中的注释。

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

const path = require("path");
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: "./js/main.js",
    output: {
        path: path.resolve(__dirname, "build"),
        publicPath: "/build/",
        filename: "[name].js"
    },
    module: {
        rules: []
    },
    devtool: 'inline-source-map',
    mode: 'development',
    plugins: [
        new htmlWebpackPlugin({
            filename: '../index.html',
            template: 'html/index.html',
            inject: 'body',
            minify: {
                removeComments: true
            }
        })
    ]
};

构建以后的对比（构建后注释被清理了，但注释的位置会以空行的方式保留）：

collapseWhitespace（默认值false）

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

构建以后的对比（构建后注释的空行也被清理了，但span元素内字符串包含的空格没有被清理，只有头部和尾部的空格被清理）：

minifyCSS（默认值false）

压缩html内的样式。

构建以后的对比（构建后html内的样式，无论是写在style标签内还是直接写在元素上的样式，包含的空格、换行和最后一个分号都被清理了）：

minifyJS（默认值false）

压缩html内的js。

构建以后的对比（这个配置项似乎没有生效，js没有变化，有知道原因的同学请留言，谢谢）：

removeEmptyElements（默认值false）

清理内容为空的元素。

构建以后的对比（构建后内容为空的元素被清理了，但这个功能慎用，空元素可能用于占位或在js逻辑里有填充动作）：

caseSensitive（默认值false）

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

构建以后的对比（构建后属性名未发生变化，如果使用默认值，则构建后属性会被转成全小写）：

removeScriptTypeAttributes（默认值false）

去掉script标签的type属性。

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

removeStyleLinkTypeAttributes（默认值false）

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

构建以后的对比（构建后style和link标签的type属性被清理）：

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