html模板必须由构建脚本（如html-webpack-plugin或vite-plugin-html）驱动生成，template参数须指向源文件（如./src/template.ejs），不可指向dist产物；所有动态数据须通过templateparameters注入，执行环境为构建时node.js，非浏览器运行时。
HTML模板必须由构建脚本驱动生成，而不是手动维护或静态托管；否则资源路径错乱、环境变量不生效、热更新失效等问题会立刻浮现。
html-webpack-plugin 的 template 参数必须指向源模板文件，不能是构建后产物
常见错误是把 template 指向 dist/index.html 或已编译的 HTML 文件。这会导致插件无法读取原始模板语法（如 EJS 或 Pug），也无法注入 htmlWebpackPlugin 对象和 import.meta.env 等运行时上下文。
- 正确路径示例：
template: './src/template.ejs'（源码目录下） - 错误路径示例：
template: './dist/index.html'（构建产物目录） - 若用 Pug，确保
template是.pug文件，且已配置对应 loader 或使用html-webpack-plugin的templateParameters注入数据 - Vite 用户注意：
vite-plugin-html同样要求template是源文件，且仅支持字符串插值或函数式模板，不支持 EJS/Pug 原生语法（需额外插件）
构建脚本必须控制 HTML 输出时机，不能绕过插件直接写文件
有人在 package.json 里加 "build:html": "cp src/index.html dist/" 这类命令，结果发现 JS 路径没哈希、CSS 没注入、title 无法动态替换——因为 html-webpack-plugin 的核心能力：资产映射、标签注入、模板执行，全被跳过了。
- Webpack 场景下，所有 HTML 输出必须走
html-webpack-plugin的compilation.hooks.processAssets阶段（Webpack 5+） - Vite 场景下，必须用
vite-plugin-html或自定义插件 hooktransformIndexHtml，而非 shell 脚本复制 - 若需多页输出（如
admin.html、user.html），每个实例都要独立 new 一个插件，共用同一份 template 但传不同templateParameters - 不要在构建后用
html-minifier直接处理dist/index.html——它应作为插件链中的一环（如通过html-webpack-plugin的minify选项），否则可能破坏已注入的 script 标签结构
templateParameters 是跨构建工具统一传递数据的唯一可靠方式
你无法依赖全局变量或 window 对象往模板里塞数据，因为模板执行发生在 Node.js 环境（Webpack 构建时）或 Vite 服务端渲染阶段，不是浏览器。
- Webpack 示例：
templateParameters: { APP_NAME: process.env.APP_NAME || 'MyApp', VERSION: require('./package.json').version } - Vite 示例（vite-plugin-html）：
inject: { data: { APP_NAME: import.meta.env.VITE_APP_NAME } } - EJS 中访问：
<title></title>；Pug 中：title= APP_NAME - 避免在 template 中调用
fetch或require——这些在构建时不可用；所有数据必须提前计算好传入templateParameters
真正容易被忽略的是：HTML 模板的执行环境与最终运行环境完全隔离。你在 EJS 里写的 输出的是构建那一刻的时间，不是用户打开页面的时间；而 的值，只在 Webpack 编译时确定，改了配置不重新构建就看不到变化。这种“静态快照”特性决定了所有动态逻辑必须前置到构建流程中决策，而不是留到浏览器里补救。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
