FixHtmlWebpackPlugin

适配 webpack experiments.html（原生HTML Entry）的轻量插件，不依赖 html‑webpack‑plugin / html‑loader。 解决原生 HTML Entry 产物不会自动拼接 publicPath 的痛点；同时提供HTML注释清除、{{var}}模板变量替换能力。

✨ 特性

• 🧹 清除HTML注释：移除 <!-- --> 单行/跨行注释，自动消除注释带来的空行
• 📝 简单模板变量：支持 {{variable}} 语法替换
• 🌐 修复 publicPath：自动为相对路径的 src / href 拼接 publicPath
  • 自动跳过：http:// / https:// 外部链接、/开头的绝对路径
• ⚡ 基于 webpack 官方 HtmlModulesPlugin.transformHtml 钩子，运行在HTML生成Asset之前
• 🚫 与原生 experiments.html 兼容，无模块解析冲突

⚠️ 前置条件

1. webpack ≥ 108（支持 HtmlModulesPlugin）
2. 开启实验HTML能力：experiments: { html: true }
3. 使用 HTML 文件直接作为 entry，不使用 html‑loader / html‑webpack‑plugin
4. HTML产物属性为双引号（webpack html module 默认输出格式）

📦 使用示例

import webpack from 'webpack';
import { fixHtmlWebpackPlugin } from 'fix-html-webpack-plugin';

export default {
  experiments: {
    html: true,
  },
  entry: {
    index: './src/index.html',
  },
  output: {
    path: './dist',
    publicPath: '/cdn/assets/', // 末尾务必携带斜杠
    clean: true,
  },
  plugins: [
    fixHtmlPlugin({
      publicPath: '/cdn/assets/',
      templateVars: {
        appName: 'DemoApp',
        version: '2.0.0'
      }
    })
  ]
};

📋 API

fixHtmlPlugin(options?: FixHtmlPluginOptions)

| 参数 | 类型 | 默认值 | 说明 | |---|---|---|---| | publicPath | string | '/' | CDN/资源公共路径，结尾必须带斜杠 | | templateVars | Record<string, string> | {} | {{var}} 模板变量映射表，不存在变量输出空字符串 |

处理逻辑顺序

1. 移除HTML注释，清除注释产生的空行
2. 执行 {{var}} 变量替换
3. 匹配相对路径 src="" / href=""，拼接 publicPath；跳过 http/https、/开头路径

📝输入输出示例

src/index.html

<!-- 页面注释 -->
<title>{{appName}}</title>
<script src="./main.js"></script>
<link href="../static/style.css" rel="stylesheet"/>
<script src="/lib.js"></script>
<script src="https://cdn.extern.com/sdk.js"></script>

dist/index.html（输出）

<title>DemoApp</title>
<script src="/cdn/assets/main.js"></script>
<link href="/cdn/assets/static/style.css" rel="stylesheet"/>
<script src="/lib.js"></script>
<script src="https://cdn.extern.com/sdk.js"></script>

🚧 已知限制

1. 仅处理双引号属性，单引号属性 src='xxx' 不会匹配
2. 模板变量仅支持单层 {{key}}，不支持 {{obj.key}} 嵌套表达式
3. HTML注释不支持HTML非法嵌套注释（浏览器本身也不支持）
4. 正则实现，不解析DOM；畸形换行、属性内换行的HTML可能会漏匹配

💡提示

• output.publicPath 和插件传入的 publicPath 需要保持一致；
• 若 webpack output.publicPath="auto"，建议不要启用本插件的路径修复逻辑。