启用 Webpack 文件系统缓存需配置 cache.type = 'filesystem'、指定 cacheDirectory，并设置 buildDependencies 和 snapshot 哈希比对，同时为 loader（如 babel-loader）启用独立缓存，避免动态值导致缓存失效。
直接在 webpack.config.js 中启用文件系统缓存，并配合 loader 缓存与快照机制，就能显著加速二次构建。关键不是“开了就行”，而是让缓存真正稳定复用、不被意外失效。
启用 Webpack 文件系统级持久化缓存
Webpack 5 默认不开启持久化缓存，必须显式配置。它把模块编译结果、依赖图、代码生成物等写入磁盘，下次构建时直接读取，跳过重复解析和编译。
- 设置
cache.type = 'filesystem'，这是最核心一步 - 指定
cache.cacheDirectory（如./node_modules/.cache/webpack），方便定位、清理和 CI 环境复用 - 通过
buildDependencies告诉 Webpack 哪些文件变更会令缓存失效，例如：config: [__filename, './tsconfig.json', './babel.config.js']
为常用 loader 启用独立缓存
Webpack 缓存管模块粒度，loader 缓存管单文件转换过程。两者叠加才能覆盖完整链路。
-
babel-loader加cacheDirectory: true，自动缓存转译结果（建议同时设cacheCompression: false提升开发时读取速度） -
esbuild-loader或swc-loader通常自带高效缓存，确认其文档是否需额外开启 - 避免在 loader 配置中使用动态值（如函数返回路径、
Date.now()），否则缓存键不稳定
配置快照（snapshot）避免时间戳误失效
默认情况下，Webpack 依赖文件修改时间判断是否需要重新读取，但编辑器保存、git checkout、CI 拉取都可能更新时间戳却不改内容，导致缓存被错误丢弃。
- 启用内容哈希比对：
snapshot: { resolve: { hash: true }, module: { hash: true } } - 这样 Webpack 会基于文件真实内容生成哈希，而非 mtime，大幅提升缓存命中率
- 尤其对
node_modules下的依赖文件效果明显
注意缓存失效的常见触发点
缓存不是“一劳永逸”，以下操作会让 Webpack 主动清空或跳过缓存：
- 升级或更换任何 loader/plugin（比如从
ts-loader@9换成@swc/webpack-plugin） - 修改 Webpack 配置对象中的任意字段（包括
mode、devtool、resolve.alias、optimization.splitChunks） - 改动
buildDependencies列出的文件（如tsconfig.json中调整target或lib） - 命令行参数不同（
webpack --env production和--env development视为两个独立缓存上下文）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
