webpack输出带hash的js/css文件（如main.a1b2c3.js），若html中手动写死src="main.js"，上线后必然404或加载旧缓存；更隐蔽的是webpack-dev-server从内存服务html，复制的index.html未被读取，浏览器仍加载插件生成的空白或无修改版本，导致白屏或uncaught syntaxerror。
为什么手动改 HTML 的 script src 一定会出问题
Webpack 输出带 hash 的 JS/CSS（如 main.a1b2c3.js），但 HTML 里写死 src="main.js"，上线后必然 404 或加载旧缓存。更隐蔽的问题是：webpack-dev-server 从内存服务 HTML，你复制过去的 index.html 根本没被它读取——浏览器看到的还是插件生成的那份，但里面没你改的路径，结果就是白屏或 Uncaught SyntaxError: Unexpected token '('。
html-webpack-plugin 必须配 template 才能接管 HTML
不设 template，插件只生成空白 index.html；设了但路径错（比如写成 'src/index.html' 而不是 './src/index.html'），会报 Module not found: Error: Can't resolve './src/index.html'。正确做法：
-
template必须是相对webpack.config.js的路径，开头带./ - 模板里可直接用
插入变量，配合配置中的title: '后台管理' - 图片等静态资源别硬编码路径，改用
<img src="<%=%20require('./assets/logo.png')%20%>">，这样 webpack 才能自动加 hash 并拷贝
多页应用下 chunks 配置错一个就全乱
多个 entry（如 { login: './src/login/index.js', dashboard: './src/dashboard/index.js' }）不代表 HTML 会自动分片。默认 chunks: ['login', 'dashboard']，导致登录页也加载了仪表盘 JS。必须显式隔离：
- 每个
HtmlWebpackPlugin实例配独立filename（如'login.html'），否则后一个覆盖前一个 -
chunks只写当前页面需要的 entry 名，比如登录页配chunks: ['login'] - 不同页面用不同模板时，
template路径也要对应，如'./src/login/index.html'
生产环境 minify 开关要谨慎
minify 开启后可能把 EJS 模板语法（如 ）误删，或压缩掉 <script></script> 标签里的换行导致 JS 报错。建议：
- 开发环境关掉：
minify: false，方便查 DOM 结构和变量渲染结果 - 生产环境用最小化配置：
minify: { collapseWhitespace: true, removeComments: true }，别加removeScriptTypeAttributes这类激进选项 - 如果用了内联 JS 或 JSON 数据，先在模板里用
<script type="application/json">...</script>包裹，再 minify
hash 替换不是“配了插件就完事”，关键在 template 是否真正由 webpack 管理、chunks 是否精准隔离、以及 minify 是否破坏模板逻辑——这三处任一出错，都会让 hash 失效或页面白屏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
