html模板必须作为被处理的资源接入构建流程：webpack需用html-webpack-plugin配置template，vite默认以根目录index.html为模板并解析模块脚本；pug/ejs/jinja等需预编译为html，不可直接部署；组件化html依赖构建时内联（如posthtml-include），非运行时加载。
HTML模板怎么接入Webpack或Vite的构建流程
直接把 index.html 放进 public/ 目录，等于绕过构建系统——JS 路径不哈希、环境变量不注入、HMR 不生效。真正集成的前提是让 HTML 成为“被处理的资源”，而非静态托管文件。
- Webpack 项目必须用
html-webpack-plugin，配置template: './src/index.html'，否则这类插值不会解析 - Vite 项目中
index.html默认就是模板，但只认<script type="module" src="/src/main.ts"></script>这种写法；手动加<script src="build/app.js"></script>会导致路径 404 - 所有动态内容（如多语言 title、SEO meta）必须走构建时注入，比如 Vite 的
<title>${import.meta.env.VITE_APP_TITLE}</title>，而不是运行时 JS 拼接
为什么 Pug/EJS/Jinja 模板不能直接扔进 dist 目录
它们不是浏览器能执行的格式，必须经过预编译。常见错误是把 header.pug 复制到 dist/ 下，结果打开页面一片空白——因为浏览器根本不认识 .pug 后缀。
- Pug 需要
npm run build:pug编译成 HTML，输出到dist/；单独运行pug src/pug/*.pug -o dist/容易漏掉include和extends的路径解析 - Jinja 模板必须由 Python 环境渲染（
env.get_template('base.html').render(...)），前端构建工具无法原生支持；强行用 Webpack 的html-loader+posthtml-include只能模拟简单 include，不支持 Jinja 的{% for %}或{% if %} - EJS 同理，需搭配 Node.js 服务端或构建脚本（如
node scripts/render-ejs.js），不能靠浏览器加载.ejs文件
组件化 HTML 片段怎么和构建脚本联动
所谓“组件化 HTML”，在无框架场景下，本质是构建时的文件合并。不是运行时 fetch() 加载，也不是 Web Components 封装——后者需要 JS 注册，前者破坏缓存与 SEO。
- 推荐用
posthtml-include（Webpack/Vite 均可配）：在src/index.html中写<include src="./components/header.html"></include>，构建时自动内联 - 路径必须是相对构建上下文的，比如
src/components/header.html，不能写../components/header.html—— 否则 Webpack 报Module not found，Vite 报Failed to resolve import - 避免嵌套 include：A.html → B.html → C.html 容易导致构建超时或循环引用；单层 include + 手动维护依赖顺序更稳
CDN 组件库和本地构建脚本共存时的坑
一边用 bootstrap.bundle.min.js CDN，一边又在 Webpack 中 import 'bootstrap'，结果样式冲突、事件监听重复绑定、Popper 初始化两次——这是最典型的“混合加载”反模式。
- 选一种方式到底：CDN 就彻底移除
node_modules/bootstrap和相关 import；本地构建就删掉所有<link href="https://cdn...">，改用import 'bootstrap/dist/css/bootstrap.css' - CDN 地址必须带完整版本号（如
@5.3.3），否则缓存更新不可控；本地构建时注意 Sass 变量覆盖顺序，@import '~bootstrap/scss/functions';必须在自定义变量之前 - 图标字体（如 Font Awesome）若用 CDN，确保
font-display: swap已启用，否则首次加载会触发 FOIT（Flash of Invisible Text）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
