为什么我的HTML压缩配置不起作用？
我在Vue项目里用HtmlWebpackPlugin做HTML压缩，按文档配了minify选项，但生成的文件还是有空格和换行。比如这个配置：
module.exports = {
configureWebpack: {
plugins: [
new HtmlWebpackPlugin({
minify: {
removeComments: true,
collapseWhitespace: true
}
})
]
}
};
构建后打开dist/index.html，发现标签间还是保留了换行，像这样：
<div>
<p>内容</p>
</div>
查了插件版本没问题，也试过设置conservativeCollapse，但效果没变化。是不是哪里配置漏了？或者需要配合其他loader？
2 条解答
你现在这样写相当于 new 了一个新的 HtmlWebpackPlugin，导致有两个实例在跑，一个走默认配置（可能带压缩），另一个是你这个不完整的 minify 配置，结果互相打架，反而压缩不彻底。
解决办法很简单：不要直接 new 插件，而是通过
chainWebpack或configureWebpack正确修改已存在的实例。推荐用 chainWebpack 改：
这样改的是 vue-cli 内部那个 HtmlWebpackPlugin 实例，不会多生成一个。你原来的写法等于加了个新插件，而旧的还在，HTML 被处理了两遍，行为不可控。
改完后重新 build，再看 dist/index.html，空白和换行应该就没了。如果还有，调试看看是不是其他插件或缓存影响，可以先删掉 dist 目录再构建。
另外注意 collapseWhitespace 对某些 CSS 布局（比如 inline-block 间的空白）有影响，线上没问题的话就不用管，但测试时留意下样式是否错位。
试试把这个配置加上：
minify: {
removeComments: true,
collapseWhitespace: true,
conservativeCollapse: false,
minifyJS: true,
minifyCSS: true
}
如果你发现标签之间的换行还是没去掉，那大概率是 html-minifier 的默认规则在作怪。比如