HTML 中手写 script/link 易导致 404、样式错乱等问题，因脱离 Webpack 打包流程，无法同步 hash 文件名、依赖分析和注入时机；html-webpack-plugin 通过 template、inject、filename、chunks 等配置实现资源与 HTML 自动对齐。
HTML 里直接写 script 和 link 为什么容易出问题
因为浏览器加载顺序和执行时机不可控，且无法参与 Webpack 的依赖图分析。比如你在 index.html 里手写 <script src="main.js"></script>，Webpack 打包后实际输出的是 main.a1b2c3.js，但 HTML 还在找 main.js，结果就是 404 或 Uncaught SyntaxError。
常见错误现象：
- 控制台报
GET /main.js 404，但 dist 目录下明明有带 hash 的文件 - 多个页面共用同一份 JS，却因手写路径导致某页漏加载关键模块
- 开发时正常，构建后样式错乱——CSS 没注入或注入顺序错位
根本原因不是代码写错了，而是 HTML 脱离了打包流程。Webpack 不会自动改你手写的标签，它只管生成 bundle 文件。
html-webpack-plugin 怎么配才不踩坑
它不是“可选插件”，而是让 HTML 和打包资源对齐的唯一可靠方式。关键不在“用不用”，而在参数是否匹配你的结构。
立即学习“前端免费学习笔记（深入）”；
必须显式设的几项：
-
template：必须是相对webpack.config.js的路径，比如'./src/index.html'，不能写'src/index.html'（少个点就复制失败） -
inject：设为'body'或'head'，避免默认插入位置干扰 DOM 渲染逻辑 -
filename：多页场景下别全写成'index.html'，否则后一个实例会覆盖前一个 -
chunks：多 entry 时必须指定，比如chunks: ['login']，否则所有 JS 都塞进登录页
示例配置片段：
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
new HtmlWebpackPlugin({
template: './src/login/index.html',
filename: 'login.html',
chunks: ['login'],
inject: 'body'
})
CSS 和 JS 该内联还是外链
内联（<style> / <script> 直接写在 HTML 里）适合极小、首屏强依赖的代码；外链适合复用、可缓存、体积大的资源。混淆这两者，体积和性能都会失控。
判断依据：
- JS 逻辑超过 20 行、含第三方库（如 Lodash）、被多个页面引用 → 必须抽成
.js文件 +import或script type="module" - CSS 超过 1KB、含媒体查询或主题变量 → 用
MiniCssExtractPlugin抽成外链 CSS，配合link rel="stylesheet"注入 - 图标 SVG、小背景图 → 可 base64 内联，但重复出现 3 次以上就该提成独立文件
注意：html-webpack-plugin 的 minify.removeStyleLinkTypeAttributes: true 会删掉 type="text/css"，现代浏览器没问题，但若要兼容 IE11 且用了 type="module"，删掉就降级失败。
图片和字体怎么进 bundle 而不炸体积
Webpack 默认把小图片转成 base64 内联，大图走 file-loader 输出单独文件。但阈值设错，要么 HTML 膨胀到几 MB，要么请求暴增。
推荐配置（Webpack 5+）：
- 图片：用
asset类型 loader，设parser.dataUrlCondition.maxSize: 8192（8KB），超限自动输出文件 - 字体：统一放
fonts/目录，用asset/resource强制外链，避免 base64 编码（WOFF2 本身已压缩） - SVG：按用途分——图标用
@svgr/webpack转 React 组件或 inline；装饰图用asset处理
特别提醒：如果你用 html-webpack-plugin 压缩 HTML，别开 removeRedundantAttributes，否则 <img src=""> 里的空 src 可能被删，导致图片加载异常。
