html-webpack-plugin 本身不支持模板复用，需配合 posthtml-include 或 html-loader 等插件实现；前者纯文本替换，后者走模块系统并支持资源解析；路径须相对于 template 配置目录，且需注意 DOM 就绪与 Shadow DOM 初始化时机。
为什么直接用 html-webpack-plugin 不能解决模板复用问题
html-webpack-plugin 的核心职责是把打包后的 JS/CSS 注入 HTML，它不解析、不合并、不处理模板间的嵌套或复用逻辑。你写一个 header.html，再在 index.html 里写 <!--#include file="header.html"-->，Webpack 默认完全无视这行——它不是 SSI 服务器，也不会执行模板引擎语法。
常见错误现象包括：index.html 里能看到注释文本，但 header 内容没出现；或者用了 posthtml-include 插件却漏配 loader，导致构建时报错 Cannot find module 'posthtml'。
- 必须显式配置预处理器插件（如
posthtml-include或html-loader的interpolate模式），html-webpack-plugin自身不带该能力 - 路径必须相对于
template配置项的基准目录，不是相对于 Webpack 根目录——比如template: './src/index.html'，那include的路径就得从./src/开始算 - 如果模板里含
{{title}}这类插值，html-loader默认不处理，得手动启用interpolate: true并配合html-webpack-plugin的templateParameters传参
posthtml-include 和 html-loader 怎么选
两者都能做文件内联，但行为边界完全不同：posthtml-include 是构建时纯文本替换，不走 Webpack 模块系统；html-loader 把 HTML 当模块处理，支持 require('./header.html')、CSS/图片资源自动解析、甚至可配置 minimize 压缩。
典型误用：用 posthtml-include 加载一个含 <img src="./logo.png"> 的 header.html，结果构建后图片路径 404——因为它不解析 src 属性，也不触发 file-loader。
立即学习“前端免费学习笔记（深入）”；
- 选
posthtml-include：只做静态结构拼接，不需要资源解析，且希望保留原始 HTML 语义（比如 SEO 友好） - 选
html-loader：需要import语法、依赖其他模块、要压缩或转义 HTML 内容、需处理相对路径资源 - 二者不可混用：同时启用会重复处理，导致
<include>标签被当成普通文本渲染出来
如何让 <template> 片段参与构建流程
原生 <template> 标签在构建阶段不会被识别为可复用单元，Webpack 默认跳过它。想把它纳入组件体系，必须通过 JS 主动加载并注入，或借助构建工具将其“提升”为模块。
常见陷阱：把 <template id="c-card">...</template> 放在 index.html 里，以为后续 JS 能直接调用 document.getElementById('c-card') —— 实际上，若使用 html-webpack-plugin + inject: true，它可能把 JS 插入 <body> 底部，而模板在 <head>，执行时 DOM 尚未就绪。
- 推荐做法：把
<template>单独存为components/c-card.html，用html-loader导入：import cardTpl from './components/c-card.html' - 然后在 JS 中调用
document.importNode(new DOMParser().parseFromString(cardTpl, 'text/html').getElementById('c-card').content, true) - 禁用
html-webpack-plugin的inject，改用自定义 template 函数，在 JS 执行前确保模板已挂载到 DOM
微前端场景下模板复用的硬性约束
子应用若直接复用主应用的 <template> 片段，不加隔离，样式和 ID 冲突几乎必然发生。比如两个子应用都用 <template id="modal">，document.getElementById('modal') 只返回第一个匹配项。
构建时无法解决运行时冲突：即使 Webpack 把所有模板打包进一个 HTML，只要它们共处 light DOM，CSS 就会穿透，JS 查询就会错乱。
- 必须为每个子应用的模板加唯一命名空间，例如
<template id="cart-c-modal">，而非通用modal - 禁止在模板内写
id="close-btn"，改用data-id="close-btn"或动态生成属性值 - 若需真正隔离，得在 JS 中对克隆后的 fragment 调用
element.attachShadow({ mode: 'closed' })，否则<template>仅是占位符，不是组件边界
attachShadow 必须在元素挂载前执行，否则报错 Failed to execute 'attachShadow' on 'Element': Cannot attach shadow root on a node which is not in the document。 
