html-webpack-plugin的template选项需配合对应loader才能使用ejs、pug等模板引擎：默认仅支持纯html；用ejs需配置ejs-loader，用pug需安装pug与pug-loader，typescript模板则须先经ts-loader编译再注入。
html-webpack-plugin 的 template 选项怎么选模板引擎
直接写 template 路径不等于就能用任意语法——它默认只支持纯 HTML，想用 EJS、Pug 或 TypeScript 模板，必须配对安装对应 loader 并在 Webpack rules 中声明。比如用 ejs-loader，就得加一条 { test: /\.ejs$/, use: ['ejs-loader'] }；用 pug 则要装 pug 和 pug-loader，否则 template: './src/index.pug' 会报错“Cannot find module”。TypeScript 模板更麻烦：得先用 ts-loader 编译 .tsx 文件，再让 html-webpack-plugin 接收编译后的 JS 输出（不是直接读 .tsx），否则类型检查和 JSX 支持都失效。
vite-plugin-html 的 inject 配置为什么不能 include 文件
vite-plugin-html 的 inject 只接受 JSON 数据或字符串，不提供文件包含能力。你写 inject: { html: fs.readFileSync('./header.html', 'utf8') } 看似可行，但实际会把原始 HTML 字符串当纯文本注入，不会解析其中的变量或子模板。真正需要拼接多个 HTML 片段时，得用 transformIndexHtml 钩子手动读取、合并、再返回处理后的字符串——而且要注意顺序：Vite 默认的 transformIndexHtml 执行时机在资源注入之后，如果依赖 JS bundle 的 hash 值，必须确保钩子执行顺序靠后，否则 [contenthash] 还没生成就去替换，结果为空。
HTMLHint 规则配置里哪些项会影响构建流程
不是所有 .htmlhintrc 规则都只是警告：像 "id-unique": true、"alt-require": true、"meta-charset-require": true 这类规则一旦触发，配合 Vite 插件里的 process.exit(1) 就会中断构建。但要注意，htmlhint 默认不校验内联脚本或样式中的 JS/CSS 语法错误，它只管 HTML 结构；如果你在 <script></script> 标签里写了 ES2024 语法，HTMLHint 不报错，但后续打包可能失败。另外，"src-not-empty" 对动态生成的 src（如 src=""）会误报，这种场景得关掉该规则或改用更灵活的模板引擎做预处理。
html-webpack-template 为什么不适合生产环境直接用
html-webpack-template 是个增强型默认模板，但它本质是运行时拼接字符串，所有变量都靠 lodash.template 解析，没有预编译、不支持条件嵌套深度超过 3 层、也不做 XSS 自动转义。你在模板里写 ，输入 <script>alert(1)</script> 就直接执行了。而现代项目普遍要求服务端渲染或静态生成时的安全保障，所以它只适合开发阶段快速原型，上线前必须换成 html-webpack-plugin + ejs（开启 escape）或 eta 这类带自动转义能力的引擎。更关键的是，它的变量作用域是扁平的，无法处理嵌套对象路径如 ，容易静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
