如何配置html-minimizer-webpack-plugin保留CSS中CMS变量并压缩HTML？

问题核心是插件默认依赖的CSS压缩工具（cssnano）会将{video_width}/{video_height}这类非标准CSS语法判定为无效内容，进而移除相关声明。要保留这些模板变量同时正常压缩HTML，只需调整CSS压缩规则：

具体配置方案 #

修改webpack配置中的HtmlMinimizerPlugin选项，禁用cssnano的「丢弃无效CSS声明」功能：

const HtmlMinimizerPlugin = require('html-minimizer-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new HtmlMinimizerPlugin({
        minimizerOptions: {
          // 常规HTML压缩配置
          collapseWhitespace: true,
          removeComments: true,
          // 配置CSS压缩规则
          minifyCSS: {
            preset: [
              'default',
              {
                discardInvalid: false, // 关键：不丢弃无效CSS声明，保留模板变量
                // 可选：若担心未使用样式被误删，可关闭discardUnused
                // discardUnused: false
              },
            ],
          },
        },
      }),
    ],
  },
};

原理说明 #

discardInvalid是cssnano默认启用的插件，会自动移除不符合CSS规范的代码片段。你的模板变量属于预渲染占位符，并非标准CSS值，因此被判定为无效。关闭该选项后，压缩器会保留这些占位符，同时正常压缩其他合法的CSS和HTML内容。

注意事项 #

• 关闭discardInvalid后，其他真正无效的CSS代码也会被保留，因此需确保项目中其他CSS均为标准语法。
• 若你的模板变量是通过模板引擎（如EJS、Handlebars）在编译阶段渲染，可考虑先完成模板渲染再执行压缩，此场景下无需上述配置。

内容的提问来源于stack exchange，提问作者shbchk