Lit项目构建后%字符丢失求助（webpack+minify-html-literals-loader）

问题重现 #

使用Lit框架搭配Webpack打包，通过minify-html-literals-loader压缩HTML字面量时，模板字符串中紧跟在}后的%会被错误移除：

• 构建前代码：

  style="width:${(product.extra.rating / 5) * 100}%;"
  

• 构建后输出：

  style="width:75;"
  

问题原因 #

minify-html-literals-loader处理未编译的TS模板字符串时，会将${}视为HTML模板的动态片段，结合内置的CSS压缩逻辑，误判}后的%为冗余字符进行移除；同时当前Webpack loader的执行顺序是先压缩再转译TS，进一步加剧了语法识别错误。

解决方案 #

方案1：调整Loader执行顺序

将ts-loader放在minify-html-literals-loader之前执行，先把TS代码转译为JS，再让压缩loader处理已转译的HTML字面量，避免对TS模板语法的误识别：

rules: [
  {
    test: /\.tsx?$/,
    use: 'ts-loader',
    exclude: /node_modules/,
  },
  {
    test: /\.(ts|tsx)$/,
    use: [{ 
      loader: 'minify-html-literals-loader',
      options: {
        htmlMinifierOptions: {
          minifyCSS: {
            // 保留CSS单位，避免误删%
            keepUnits: true
          }
        }
      }
    }],
  },
  // 其余CSS规则保持不变
]

方案2：修改模板字符串写法

通过字符串拼接拆分表达式与单位，避免loader将}和%视为连续的可移除内容：

// 写法1：外部拼接
style=`width:${(product.extra.rating / 5) * 100}` + '%;'
// 写法2：模板内拆分
style=`width:${(product.extra.rating / 5) * 100}${'%'};`

方案3：添加压缩过滤规则

通过shouldMinify函数跳过包含动态CSS单位的HTML字面量，针对性避免误压缩：

{
  test: /\.(ts|tsx)$/,
  use: [{ 
    loader: 'minify-html-literals-loader',
    options: {
      shouldMinify: (template) => {
        // 跳过包含`}%`的模板字符串
        return !template.includes('}%');
      }
    }
  }],
}

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