html-webpack-plugin与webpack版本不匹配直接导致构造函数报错、模板不渲染或缺失js/css标签；webpack 5需搭配@5.x，webpack 4需@4.x，webpack 3需@3.2.0，版本交叉必须重装匹配版本。
html-webpack-plugin 与 Webpack 版本不匹配导致模板失效
直接后果是 HtmlWebpackPlugin 构造函数报错、模板内容不渲染，或生成的 HTML 中缺失 JS/CSS 引入标签。这不是模板写得不对，而是插件和构建工具底层 API 断层了。
- Webpack 5 → 必须用
html-webpack-plugin@5或更高（npm install --save-dev html-webpack-plugin） - Webpack 4 → 只能用
html-webpack-plugin@4.x（npm install --save-dev html-webpack-plugin@4） - Webpack 3 → 已淘汰，但若仍在用，需锁定
html-webpack-plugin@3.2.0，且不能混用html-webpack-template（它只适配 v3）
检查方式：npm list webpack html-webpack-plugin。若输出中版本交叉（如 webpack@5 + html-webpack-plugin@4），立刻重装匹配版本——别指望“加个兼容层”能绕过去。
自定义模板（如 html-webpack-template）注入逻辑被破坏
常见现象：设置了 appMountId 却没生成对应 <div id="root"></div>；或静态资源路径变成 /static/js/main.js 而不是相对路径 js/main.js，导致 404。
- 必须设
inject: false，否则html-webpack-plugin会覆盖模板里的手动注入逻辑 -
template值要用require('html-webpack-template')，而不是字符串路径（如'node_modules/.../index.ejs'），否则 EJS 模板变量（如）无法解析 - Webpack 5 的
public目录资源默认走根路径，若你用output.publicPath: ''，模板里就得写<script src="js/main.js"></script>，而非<script src="/js/main.js"></script>
组件化打包后 CSS/JS 路径错乱，尤其在子路由或非根部署时
比如部署到 https://example.com/my-app/，但生成的 HTML 仍引用 /js/main.js，浏览器实际请求的是 https://example.com/js/main.js（404）。
- 关键配置是
output.publicPath：开发时可设为'/'，上线前必须改为带子路径的值，如'/my-app/' -
html-webpack-plugin的filename和chunks不影响资源路径，只控制 HTML 文件名和注入哪些 chunk - 若用
mini-css-extract-plugin提取 CSS，它的filename也受output.publicPath影响，别漏掉
IE8–11 下自定义元素（Custom Elements）或现代 API 导致白屏
不是模板或打包的问题，而是模块化代码本身在老浏览器里执行失败，连 HTML 都没机会渲染出来。
- 仅引入
html5shiv不够——它只让 IE 认识<header></header>标签，但不解决customElements.define()报错 - 必须加载 Web Components Polyfill：
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.6.0/webcomponents-bundle.js"></script>，且放在所有业务 JS 之前 - ES6+ 语法（如箭头函数、解构）需经 Babel 编译，
.babelrc中targets至少包含{"ie": "11"}，否则打包后的代码仍含const/=>，IE 直接 SyntaxError
真正容易被忽略的点：Webpack 的 resolve.alias 或 externals 若指向了未 polyfill 的模块（比如直接 alias 到 lit），整个链路会在老浏览器里静默失败，连错误提示都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
