不能直接当组件用，因为浏览器解析时跳过<template>内容，既不渲染也不执行其中脚本、不加载图片、不解析data-*属性；必须用document.importNode(tmpl.content, true)克隆后手动填充数据、绑定事件再插入DOM。
为什么不能直接当组件用
因为浏览器解析时会跳过 <template> 内容，既不渲染、也不执行其中的 <script>，更不会加载图片或解析 data-* 属性。你写个 <template id="card"><div class="card"><img src="avatar.jpg"></div></template>，DOM 里根本看不到它，控制台也查不到 avatar.jpg 的请求。
常见误操作包括：把它当 Vue 的 <template> 直接绑定数据；或者用 innerHTML = tmpl.innerHTML 往容器里塞——这会导致表单元素状态丢失（比如 <input checked> 的勾选态清空）；还有人试图在 <template> 里写内联脚本，结果完全不执行。
- 必须用
document.importNode(tmpl.content, true)克隆内容，再手动填充数据、绑定事件，最后插入 DOM - 克隆后含
<script>或<style>的节点，不会自动执行或生效，得自己遍历执行或注入 -
<template>是静态占位符，不是运行时组件，没生命周期、没响应式，纯靠 JS 驱动
templateParameters 在 html-webpack-plugin 中为何总 undefined
因为 templateParameters 是构建时传给模板引擎的静态数据，不是运行时变量。你写 htmlWebpackPlugin.options.templateParameters.API_HOST，Webpack 构建阶段压根没这个属性——它只在模板渲染时存在，且仅限于 HTML 模板文件内使用（如 EJS 的 <%= API_HOST %>）。
典型错误现象：页面里出现原始模板语法 <%= API_HOST %>，或控制台报 undefined；还有人把 process.env.API_HOST 直接塞进 templateParameters，结果构建失败或注入空值。
立即学习“前端免费学习笔记（深入）”；
- 必须提前解构环境变量：
API_HOST: process.env.API_HOST || 'https://dev.example.com' - 确保用了支持模板语法的 loader（比如默认的
html-webpack-plugin渲染逻辑），别混用 EJS 却没配ejs-loader - 在
index.html里写<script>window.API_HOST = '<%= API_HOST %>'</script>，注意单引号包裹字符串，避免 JS 语法错误
HTMLWebpackInjectEnvPlugin 和 DefinePlugin 能否互相替代
不能。它们作用域完全不同：DefinePlugin 只替换 JS 模块里的文本，对 HTML 文件完全无效；HTMLWebpackInjectEnvPlugin 只往 HTML 注入 window.env 对象，JS 里读不到 process.env。
误用后果很直接：JS 里 fetch 还在用写死地址，HTML 里却显示了正确域名；或者 window.env.API_HOST 是 undefined，但你以为它该有值。
-
HTMLWebpackInjectEnvPlugin必须显式配置白名单，比如['API_HOST', 'APP_VERSION']，漏一个就拿不到 - 如果项目用了多个
HtmlWebpackPlugin实例，每个都得单独传一次插件实例 - 生成的
<script>window.env = {...}</script>必须在你自己的 JS 执行前加载，建议放<head>底部或<body>开头
Vite 中用 vite-plugin-html 注入变量为什么常报 SyntaxError
因为插件默认不做 HTML 转义，也不自动 JSON 序列化。你传个含双引号、尖括号或换行的字符串进去，比如 { title: "It's \"important\"" }，最终生成的 HTML 就是 window.config = { title: "It's "important"" }; —— JS 解析直接崩。
这不是插件 bug，而是设计使然：它假设你清楚自己在做什么，需要你负责数据安全和格式合规。
- 所有字符串值必须手动
JSON.stringify()，比如inject: { title: JSON.stringify(process.env.TITLE) } - 不要依赖插件自动转义，它不处理引号、
<、&等字符，HTML 层面会出错 - 注入时机在 HTML 构建阶段，不是运行时，所以无法读取用户行为或动态计算结果
真正难的不是怎么注入，而是什么时候该用哪一层机制：构建时静态注入适合环境配置，运行时挂载适合用户态数据，而 <template> 只负责结构复用——三者混用却不划清边界，才是多数问题的根源。
