HTML静态资源指纹必须在构建阶段生成并注入，而非运行时JavaScript动态修改；核心是构建工具（如Webpack的contenthash、Vite的hash）基于文件内容生成稳定哈希，重命名JS/CSS等静态资源，并自动更新HTML中对应script/link标签的src/href路径，确保缓存一致性与部署协同。
HTML静态资源指纹不是往HTML里“塞字符串”，而是让构建工具在打包时，把JS/CSS等文件的内容哈希算出来，再重命名文件、更新HTML中对应的<script>和<link>标签的src或href——整个过程必须发生在构建阶段，运行时改不了。
Webpack中用contenthash生成带哈希的文件名
关键不是“加hash”，而是让output.filename和output.chunkFilename模板里包含[contenthash]。它会基于文件内容生成稳定哈希，内容不变则hash不变，避免缓存误失效。
-
output.filename: "[name].[contenthash:8].js"—— 主入口JS带8位哈希 -
output.chunkFilename: "[name].[contenthash:8].js"—— 动态导入的chunk也带哈希 - CSS同理：配合
mini-css-extract-plugin，设置filename: "[name].[contenthash:8].css" - 别用
[hash]或[chunkhash]：前者是每次构建全局hash，后者在代码分割场景下不稳定
Vite默认已启用资源哈希，但需确认输出配置
Vite 从 4.0 起默认在build.rollupOptions.output.entryFileNames和chunkFileNames中注入[hash]，但它实际用的是内容哈希（Rollup 的renderChunk hook 内部保证），行为接近 Webpack 的contenthash。
- 检查构建产物：看
dist/下JS/CSS文件名是否含哈希串，如index.a1b2c3d4.js - 如需显式控制长度，可覆盖配置：
build.rollupOptions.output.entryFileNames: "[name].[hash:8].js" - Vite 不处理 HTML 中的资源引用自动替换——它依赖
vite-plugin-html或内置逻辑，确保index.html里的<script>指向正确哈希文件
html-webpack-plugin如何把哈希路径写进HTML
它不靠“手动插入”，而是读取Webpack编译后的assets对象，自动把带哈希的JS/CSS路径注入到模板中。前提是模板里用了<%= htmlWebpackPlugin.files %>或<%= compilation.assets[...].source() %>这类占位符。
立即学习“前端免费学习笔记（深入）”；
- 禁用
hash: true选项：它只给资源URL加随机查询参数（如?v=abc123），不是内容哈希，无法实现长期缓存 - 推荐方式：关闭
hash，改用templateParameters传入自定义数据，例如把manifest映射传进去，再在模板里手写<script src=""></script> - 确保
filename设为index.html且不在public/下——否则插件不接管，哈希路径不会被重写
为什么不能在HTML里直接写死哈希路径
你可能想手动改index.html里的<script src="main.abc123.js">，但这会立刻失效：下次构建哈希变了，而HTML没重新生成，导致404。
- 所有资源路径必须由构建工具统一管理，HTML只是消费方
- 如果用Sails.js等老框架，得靠
linker任务解析HTML AST并替换src/href，原理相同：构建时扫描+重写 - CDN或Nginx转发时，若HTML被缓存而JS已更新，用户会加载旧HTML里写的旧哈希路径——所以HTML本身必须配
Cache-Control: no-cache或ETag，不能强缓存
最容易被忽略的一点：HTML文件自己绝不能加contenthash后缀。它作为入口，路径固定为/index.html；一旦改成/index.a1b2c3.html，所有相对路径全部崩坏，PWA离线包、SEO链接、微前端基座都会出问题。
