webpack中link标签css路径404，根本原因是webpack不解析html中手写的href，导致静态路径与hash文件名不匹配；必须通过html-webpack-plugin自动注入link标签，并确保js中import css以建立依赖链。
Webpack 里 link 标签的 CSS 路径为什么总 404？
因为 Webpack 默认不处理 HTML 中手写的 <link rel="stylesheet" href="main.css">。它只打包 JS 和 CSS 模块，但不会去改你写死在 HTML 里的 href 值——哪怕你配置了 hash 输出，main.css 还是叫 main.css，而实际生成的是 main.a1b2c3.css。
常见错误现象：
- 控制台报
GET /main.css 404，但dist目录下明明有带 hash 的 CSS 文件 - 开发时样式正常，构建后全没了，或部分页面漏加载
- 多个入口共用同一份 CSS，但某页没加
<link>就直接白屏
根本原因不是路径写错了，而是 HTML 脱离了 Webpack 的依赖图。Webpack 不会扫描 HTML 文件去解析 href，更不会重写它。
html-webpack-plugin 怎么配才让 link 标签自动对齐打包结果？
它不是“锦上添花”，而是解决这个问题的唯一通用方式。关键参数必须匹配你的输出结构：
-
template：指向源 HTML（如src/index.html），不能是空字符串或省略 -
inject: true（默认）：让插件自动把<link>和<script></script>插入到或底部 -
chunks：按需指定哪些 chunk 的资源要注入，比如多页应用中chunks: ['index']只注入 index 入口的 CSS/JS -
filename：输出 HTML 的名字，比如filename: 'admin.html'，避免覆盖
如果你用 mini-css-extract-plugin 抽离 CSS，插件会自动识别并注入对应的 <link rel="stylesheet">，前提是 CSS 确实被 Webpack 当作模块引入（例如在 JS 里写了 import './style.css'）。
为什么不能靠手写 <link> + file-loader 解决？
file-loader 只负责把文件拷过去并返回新路径，但它无法触发 HTML 注入。你得手动在 JS 里 require('./style.css')，再靠 html-webpack-plugin 捕获这个依赖，才能生成正确的 <link> 标签。
容易踩的坑：
- 只配了
file-loader处理.css，但没在 JS 中 import —— 结果 HTML 里什么都没注入，CSS 文件虽然生成了，但没人引用 - 用了
style-loader（内联 CSS 到 JS），又同时手写<link>—— 导致样式重复或冲突 - 误以为
public/目录下的 CSS 可以被 Webpack 自动 hash —— 实际上public是直拷贝，路径不会变，也不参与依赖分析
真正起作用的链条是：JS import → css-loader → mini-css-extract-plugin → html-webpack-plugin 自动注入 <link>。
生产环境要不要保留 <link> 标签？还是全用 JS 内联？
取决于首屏性能要求和缓存策略。内联（style-loader）适合极小关键 CSS，但会增大 JS 体积、阻塞 JS 执行；外链（mini-css-extract-plugin）支持浏览器缓存、可并行加载，但多一次 HTTP 请求（HTTP/2 下影响变小）。
实操建议：
- 首屏关键 CSS 可考虑提取为
<style></style>内联（用critters或手动提取），其余走<link> - 不要在 HTML 里同时写
<link>和用 JS import 同一个 CSS —— 极易重复加载 - 如果用了
preload，必须通过html-webpack-plugin的tags选项动态插入，手写<link rel="preload">同样面临路径不更新问题
最常被忽略的一点：即使你不用 html-webpack-plugin，也至少得用 copy-webpack-plugin 把 HTML 拷过去，并手动维护路径——但这等于放弃所有自动化收益，出错概率反而更高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
