html模板仅是载体，关键在于构建时的解析与配置；html-webpack-plugin的template路径必须指向webpack可处理的有效文件，否则因缺少html-loader等配置而报错。
HTML 模板本身不参与构建时的组件逻辑复用，真正起作用的是构建阶段对模板的解析、注入和隔离方式——模板只是载体，配置才是关键。
html-webpack-plugin 的 template 选项必须指向可构建的文件路径
插件不会自动识别 src/components/ 下任意 .html 文件；它只按你写的 template 路径去读取，且该路径必须能被 Webpack 的 module.rules 正确处理。
- 写成
template: "src/template.html"但没配html-loader→ 构建报错Module parse failed: Unexpected token ' - 写成
template: "!!ejs-loader!src/index.ejs"（内联 loader）→ 绕过 rules 配置，但失去复用性和可维护性 - 正确做法是统一在
rules中声明：{ test: /\.(ejs|html)$/, use: ["html-loader", "ejs-loader"] }，再用template: "src/index.ejs"
Web Components 标签不能靠 template 渲染就自动生效
在 template 文件里写 <my-card></my-card> 不等于组件已注册或可运行——它只是静态 HTML 字符串，构建时不会执行 JS 注册逻辑。
- 必须确保
customElements.define("my-card", MyCard)在入口 JS 中执行，且时机早于 HTML 挂载 - SSR 场景下，服务端渲染出的
<my-card></my-card>是纯标签，客户端 hydration 前无行为；需配合defer加载脚本，或用is="my-card"做降级 fallback - Shadow DOM 样式隔离会导致
@media (prefers-reduced-motion)等系统媒体查询失效，得手动在adoptedStyleSheets中透传
避免 html-webpack-plugin 自动注入破坏组件封装边界
默认启用 inject: true 会把所有 bundle 脚本塞进 底部，但 Web Components 往往要求 JS 在自定义标签前加载，否则首次渲染为空白。
- 设
inject: "head"或inject: false，改用<script type="module"></script>手动控制加载顺序 - 若用
mini-css-extract-plugin提取 CSS，<link>注入位置可能影响 :host 样式优先级；建议在 template 中预留<style></style>占位符，由插件替换 - 多入口项目慎用默认
new HtmlWebpackPlugin()：它会为每个 entry 生成独立 HTML，但 Web Components 通常共用一套注册逻辑，应显式指定chunks控制注入范围
真正难的不是让 <my-header></my-header> 出现在 HTML 里，而是让它在首屏渲染时就有样式、有交互、不闪动、不阻塞。这要求模板路径、loader 配置、JS 加载时机、CSS 作用域四者严丝合缝——漏掉任何一环，组件就只是“看起来像组件”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
