前端资源哈希命名是基于内容摘要生成稳定文件后缀，确保内容不变则缓存复用、内容变更则强制更新；Webpack 中应使用 [contenthash]（非 [hash]）实现按文件粒度独立哈希，Vite 则需显式配置三类输出模板并注意 [hash] 实为内容哈希截取。
前端资源哈希命名不是“给文件名加个随机数”，而是用内容摘要生成稳定、可复现的文件后缀，让浏览器只在内容变更时才拉新版本——否则缓存就形同虚设。
Webpack 中用 [contenthash] 替代 [hash]
很多人在 output.filename 里写 [hash].js，结果每次构建整个包哈希全变，哪怕只改了一行 CSS。这是因为 [hash] 是整个 compilation 的哈希，而 [contenthash] 是单个文件内容的 MD5（实际是 Webpack 内部用的 xxHash，但语义等价）。
-
[contenthash]按 chunk 粒度计算：JS、CSS、字体各自独立哈希，互不影响 - 必须配合
HtmlWebpackPlugin使用，它会自动把index.html中引用的main.js替换为main.a1b2c3.js - 若 JS 中动态
import()了某模块，该模块 chunk 也得有[contenthash]，否则热更新或懒加载会失效 - 注意：CSS 提取插件（如
MiniCssExtractPlugin）也要显式配置filename: '[name].[contenthash].css'，否则默认不带 hash
Vite 构建时启用 build.rollupOptions.output 分片哈希
Vite 默认对 assets（图片、字体）用 [name]-[hash].[ext]，但 JS/CSS 的哈希策略藏在 Rollup 配置里。不显式覆盖的话，chunkFileNames 可能还是 [name].js，导致缓存穿透。
- 必须写全三类输出模板：
entryFileNames（入口）、chunkFileNames（异步 chunk）、assetFileNames（静态资源） - 推荐写法：
entryFileNames: 'assets/[name].[hash:8].js'——[hash:8]是简写，实际是内容哈希截取前 8 位，比完整 32 位更简洁 - 如果用了
public/目录下的静态资源（如public/favicon.ico），它不会被哈希，需手动改名或走 CDN 版本号策略 - Vite 3.0+ 开始，
[contenthash]在 Vite 原生配置中不可用，只能用[hash]（但底层仍是内容哈希），文档没明说这点，容易误以为和 Webpack 一样
HTML 中引用哈希文件时，别手写路径
手写 <script src="main.ea7f2d.js"></script> 是反模式：构建后哈希变了，HTML 就引用错；本地开发又得切回无 hash 路径，徒增条件判断。
立即学习“前端免费学习笔记（深入）”；
- Webpack 下必须用
HtmlWebpackPlugin，它读取 compilation.assets 生成真实文件名，并注入 HTML - Vite 下靠
import.meta.env.BASE_URL+ 构建时自动重写，但仅限import或new URL()方式引入的资源；传统<img src="logo.png" alt="HTML怎么做资源哈希命名_html构建资源文件哈希缓存【示例】" >不会被处理，得放src/assets/下 - 服务端渲染（SSR）场景下，若 HTML 是后端吐的，前端构建产物哈希无法透传，必须通过构建后生成 manifest.json，再由后端读取并注入
- 注意
<base href="/>%20%E6%A0%87%E7%AD%BE%EF%BC%9A%E5%AE%83%E4%BC%9A%E5%BD%B1%E5%93%8D%E6%89%80%E6%9C%89%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%E8%A7%A3%E6%9E%90%EF%BC%8C%E8%8B%A5%E8%AE%BE%E9%94%99%EF%BC%8C%E5%93%88%E5%B8%8C%E5%90%8E%E7%9A%84%E8%B5%84%E6%BA%90%E8%B7%AF%E5%BE%84%E4%BC%9A%20404 %0A
%E5%93%88%E5%B8%8C%E5%80%BC%E9%95%BF%E5%BA%A6%E4%B8%8E%20CDN%20%E7%BC%93%E5%AD%98%E5%85%BC%E5%AE%B9%E6%80%A7
%0A%E7%9F%AD%E5%93%88%E5%B8%8C%EF%BC%88%E5%A6%82%20[hash:6]%EF%BC%89%E7%9C%8B%E7%9D%80%E6%B8%85%E7%88%BD%EF%BC%8C%E4%BD%86%E5%9C%A8%E5%A4%A7%E9%A1%B9%E7%9B%AE%E9%87%8C%E7%A2%B0%E6%92%9E%E6%A6%82%E7%8E%87%E9%99%A1%E5%A2%9E%EF%BC%9B%E9%95%BF%E5%93%88%E5%B8%8C%EF%BC%88[contenthash]%20%E5%85%A8%E9%95%BF%EF%BC%89%E5%8F%88%E6%8B%96%E6%85%A2%20HTML%20%E8%A7%A3%E6%9E%90%E3%80%82%E8%BF%99%E4%B8%8D%E6%98%AF%E7%BA%AF%E5%AE%A1%E7%BE%8E%E9%97%AE%E9%A2%98%EF%BC%8C%E8%80%8C%E6%98%AF%E5%B7%A5%E7%A8%8B%E6%9D%83%E8%A1%A1%E3%80%82
- %0A
- Webpack%20%E4%B8%AD%20
[contenthash:16]%20%E6%98%AF%E8%BE%83%E4%BC%98%E8%A7%A3%EF%BC%9A%E8%B6%B3%E5%A4%9F%E9%98%B2%E7%A2%B0%E6%92%9E%EF%BC%8816%20%E8%BF%9B%E5%88%B6%2016%20%E4%BD%8D%20%E2%89%88%2064%20bit%EF%BC%89%EF%BC%8C%E4%B8%94%E6%AF%94%2032%20%E4%BD%8D%E5%B0%91%E4%B8%80%E5%8D%8A%E4%BD%93%E7%A7%AF %0A - Vite%20%E7%9A%84%20
[hash:8]%20%E5%AE%9E%E6%B5%8B%E5%9C%A8%E4%B8%AD%E5%B0%8F%E5%9E%8B%E9%A1%B9%E7%9B%AE%E5%A4%9F%E7%94%A8%EF%BC%8C%E4%BD%86%E8%8B%A5%E6%AF%8F%E5%A4%A9%E6%9E%84%E5%BB%BA%E8%B6%85%20100%20%E6%AC%A1%EF%BC%8C%E5%BB%BA%E8%AE%AE%E5%8D%87%E5%88%B0%20:10%0A - %E6%9F%90%E4%BA%9B%E8%80%81%E6%97%A7%20CDN%20%E4%BC%9A%E5%AF%B9%20URL%20%E9%95%BF%E5%BA%A6%E5%81%9A%E6%88%AA%E6%96%AD%EF%BC%88%E5%B0%A4%E5%85%B6%E5%B8%A6%20query%20%E5%8F%82%E6%95%B0%E6%97%B6%EF%BC%89%EF%BC%8C%E5%93%88%E5%B8%8C%E8%BF%87%E9%95%BF%E5%8F%AF%E8%83%BD%E8%A7%A6%E5%8F%91%20bug%EF%BC%9B%E4%BC%98%E5%85%88%E7%94%A8%E8%B7%AF%E5%BE%84%E5%90%8E%E7%BC%80%EF%BC%88
main.a1b2.js%EF%BC%89%E8%80%8C%E9%9D%9E%20query%EF%BC%88main.js?v=a1b2%EF%BC%89 %0A - Node.js%20%E6%9C%8D%E5%8A%A1%E9%9D%99%E6%80%81%E6%96%87%E4%BB%B6%E6%97%B6%EF%BC%8C%E5%88%AB%E7%94%A8%20
express.static()%20%E9%BB%98%E8%AE%A4%E9%85%8D%E7%BD%AE%E2%80%94%E2%80%94%E5%AE%83%E4%B8%8D%E6%94%AF%E6%8C%81%20main.a1b2.js%20%E2%86%92%20main.js%20%E7%9A%84%20fallback%EF%BC%8C%E5%BE%97%E9%85%8D%20extensions:%20['.js']%20%E6%88%96%E7%94%A8%20serve-static%20%E7%9A%84%20immutable%20%E9%80%89%E9%A1%B9 %0A
%E5%93%88%E5%B8%8C%E5%91%BD%E5%90%8D%E7%9C%9F%E6%AD%A3%E9%9A%BE%E7%9A%84%E4%B8%8D%E6%98%AF%E9%85%8D%E7%BD%AE%EF%BC%8C%E8%80%8C%E6%98%AF%E7%A1%AE%E4%BF%9D%E6%89%80%E6%9C%89%E8%B7%AF%E5%BE%84%E9%83%BD%E7%BB%8F%E8%BF%87%E5%90%8C%E4%B8%80%E5%A5%97%E6%9C%BA%E5%88%B6%E7%94%9F%E6%88%90%EF%BC%9A%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7%E8%BE%93%E5%87%BA%E3%80%81HTML%20%E6%B3%A8%E5%85%A5%E3%80%81CDN%20%E7%BC%93%E5%AD%98%E9%94%AE%E3%80%81%E6%9C%8D%E5%8A%A1%E7%AB%AF%20fallback%E3%80%81%E7%94%9A%E8%87%B3%E5%BC%80%E5%8F%91%E8%80%85%E6%9C%AC%E5%9C%B0%E8%B0%83%E8%AF%95%E6%97%B6%E7%9A%84%E8%B7%AF%E5%BE%84%E6%98%A0%E5%B0%84%E2%80%94%E2%80%94%E6%BC%8F%E6%8E%89%E4%B8%80%E7%8E%AF%EF%BC%8C%E7%BC%93%E5%AD%98%E5%B0%B1%E5%8F%98%E6%88%90%E9%99%B7%E9%98%B1%E3%80%82
">
