因为<template>标签不被构建工具解析，无法自动参与依赖分析和打包，需通过asset/source加载后封装为DOM片段工厂函数实现复用，但缺乏响应式更新和类型检查能力。
为什么不能直接参与工程化构建流程
因为 <template> 标签本身不执行、不渲染、不加载资源，Webpack 或 Vite 等构建工具在解析 HTML 时，会把它当作文本节点跳过处理——它不会被提取为模块、不会触发 CSS/JS 依赖分析、也不会进入打包依赖图。你写 <template id="card"><div class="card">{{title}}</div></template>，构建后它还在 HTML 里原样躺着，框架不接管，插值不生效，变量不替换。
常见错误现象：
- 用
html-webpack-plugin注入打包后的 JS，但<template>里的逻辑仍需手写 JS 去克隆填充，无法自动绑定数据 - 把
<template>放进src/components/目录，期望像 Vue 单文件组件一样被识别——结果构建器根本没扫描它 - 用
import('./card.html')动态加载，但返回的是字符串而非 DOM 结构，还得手动DOMParser解析，丢失表单状态和脚本上下文
如何让在Webpack中真正“可复用”
核心不是让它“自动运行”，而是把它变成可导入的 DOM 片段工厂。关键在于：用 raw-loader（Webpack 4）或 asset/source 类型（Webpack 5+）读取 HTML 字符串，再封装成函数返回 DocumentFragment。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 Webpack 配置中为
.html模板文件设置type: 'asset/source'，确保 import 返回字符串 - 定义工厂函数：
export function createCard(data) { const tmpl = document.createElement('template'); tmpl.innerHTML = importedHTMLString; const frag = document.importNode(tmpl.content, true); frag.querySelector('[data-bind="title"]').textContent = data.title; return frag; } - 禁止在模板内写
<script>或<style>—— 构建工具不会处理它们，且importNode不执行脚本 - 样式必须外置，通过 class 名匹配，或由主页面统一注入 CSS Module 类名
与Web Components对比时容易忽略的兼容性代价
<template> 方案看似轻量，但一旦项目需要响应式更新、属性监听或 Shadow DOM 封装，就得自己补全整套生命周期——而 customElements.define() 虽然有浏览器兼容门槛（IE 完全不支持），但它天然提供 attributeChangedCallback 和 connectedCallback，无需重复造轮子。
性能与维护差异：
- 多次调用
createCard()生成节点，若未缓存 fragment，每次都会重新解析 HTML 字符串，比 Web Component 的已注册构造函数慢 2–3 倍 - 所有绑定逻辑写死在工厂函数里，改一个字段就要动 JS；Web Component 中改
observedAttributes数组 +attributeChangedCallback即可 -
<template>方案无法被 ESLint / TypeScript 类型检查覆盖，data 结构错漏只能运行时暴露；Custom Element 可配合declare global补全类型定义
自动化构建中真正该交给工具做的事
别试图让构建工具“理解” <template> 的语义，而是让它做确定性工作：合并、压缩、路径重写、环境变量注入。例如，用 html-webpack-plugin 的 templateParameters 注入构建时静态数据，或用 PostCSS 插件自动给 <template> 内部 class 加 hash。
可落地的自动化点：
- 用
html-minifier-terser压缩<template>内容，删空格、注释、冗余属性 - 用
webpack-copy-plugin把p/dpl/下的组件模板同步到dist/，供 runtime JS 直接 fetch - 在 CI 流程中用
jest+jsdom断言createCard({ title: 'test' })返回的 fragment 是否含正确文本，而非测 HTML 字符串
最常被跳过的一步：所有 <template> 必须有唯一 id，且该 id 要出现在 JS 工厂函数的查找逻辑里——如果构建时批量重命名了 HTML 文件，而 JS 还硬编码 getElementById('card')，上线就找不到模板。
