构建时生成带 contenthash 的 CSS 文件名并自动更新 HTML 引用，可确保内容变更才触发浏览器请求新资源；Webpack 需用 MiniCssExtractPlugin + contenthash 配置，配合 HtmlWebpackPlugin 自动重写 link 标签；Vite 默认支持，但需避免在 JS 中 import CSS。
怎么让浏览器强制更新CSS文件而不是读缓存
靠改文件名，不是改 <link> 标签里的 href 手动加版本号。手动加 ?v=1.2.3 或 ?t=1715823490 看似简单，但没法触发 CDN 缓存失效、不参与构建依赖图、上线后旧 CSS 仍可能被引用——本质是绕过构建系统在“打补丁”。
真正可靠的路径是：构建时生成带内容 hash 的文件名（比如 main.a1b2c3d4.css），再自动替换 HTML 中的引用。这样只要 CSS 内容变，文件名就变，浏览器自然请求新资源。
Webpack 里怎么配出带 hash 的 CSS 文件名
关键是把 CSS 当作独立资源输出，而不是内联进 JS。用 MiniCssExtractPlugin 替代 style-loader，并在 output.filename 和 output.chunkFilename 中启用 [contenthash]。
-
[hash]是整个构建的 hash，CSS 没变但 JS 改了，它也会变 → 导致 CSS 缓存失效 -
[contenthash]只和文件内容强相关，CSS 不变，hash 就不变 - 必须关掉
optimization.splitChunks.chunks: 'all'的默认 CSS 提取干扰，显式配置cacheGroups把 CSS 单独拎出来
示例关键配置：
立即学习“前端免费学习笔记（深入）”；
new MiniCssExtractPlugin({
filename: 'css/[name].[contenthash:8].css',
chunkFilename: 'css/[name].[contenthash:8].css'
})
HTML 里引用的 CSS 路径怎么自动同步更新
不能靠人肉改 index.html 里的 <link href="main.css">。要用 HtmlWebpackPlugin，它会在每次构建时根据实际产出的 CSS 文件名，重写 <link> 的 href 值。
- 确保
HtmlWebpackPlugin的inject设为true（默认） - 不要在 HTML 模板里硬写
<link>，让它自动生成；如果必须手写，得用html-webpack-tags-plugin这类插件接管 - 注意：若用了
html-minifier-terser，确认它没把href里的 hash 截断（某些老版本会误删.后内容）
Vite 或其他构建工具怎么处理
Vite 默认就用 [contenthash] 命名静态资源，CSS 也不例外，且 index.html 中的引用会被自动重写——只要不用 import './style.css' 方式在 JS 里引入（那会走 JS 依赖链，CSS 不单独成文件）。
- 推荐写法：
<link rel="stylesheet" href="./style.css">放在index.html里，Vite 会识别并替换 - 如果用
import引入 CSS，Vite 会把它打包进 JS，无法单独提取 + hash → 失去按需加载和长期缓存优势 - Rollup 用户要搭配
@rollup/plugin-postcss和rollup-plugin-html才能实现等效能力
真正容易被忽略的是：CSS 文件名 hash 是否和 JS 的 hash 解耦。一旦共用同一份 hash（比如都用 [hash]），JS 更新会导致 CSS 缓存失效——这种“隐式耦合”在线上查缓存命中率时才会暴露，但排查成本很高。
