Hard-source-webpack-plugin 缓存没生效是怎么回事？

宇文景景提问于 2026-02-27 12:13:20 阅读 23

优化

我按照文档装了 hard-source-webpack-plugin，也加到 webpack 配置里了，但每次重新构建还是全量编译，缓存好像根本没用上。

我的配置是这样的：

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
  plugins: [
    new HardSourceWebpackPlugin({
      cacheDirectory: path.join(__dirname, './cache/hard-source/[confighash]')
    })
  ]
};

第一次构建后确实生成了 cache 目录，但第二次启动 dev server 时速度一点没变快，是不是我哪里漏了？

构建优化

我来解答赞 5 收藏

反馈

1 条解答

UP主～东成 Lv1

你这个配置看着没问题，但大概率是没生效的几个常见坑之一，我排查过好几回，总结下几个关键点：

第一个坑是 webpack 版本问题，hard-source-webpack-plugin 对 webpack4 支持最好，webpack5 虽然能装上但实际缓存效果很不稳定，我之前在 webpack5 项目里试过，缓存目录确实生成了，但每次 dev server 启动还是全量跑，最后干脆换成了 cache-loader + file-loader 的组合更靠谱。

第二个坑是 dev server 的热更新机制会绕过 hard-source 的缓存，特别是你用 webpack-dev-server 或 webpack serve 的时候，每次重启其实是一个全新的编译上下文，hard-source 的缓存机制是基于「编译上下文 hash」的，只要上下文变了（比如路径、环境变量、loader 顺序等），它就认为是全新构建，不会复用缓存。

第三个坑是你得确认缓存是否真的被读取了，可以在配置里加个 infoCache 或 info 选项，比如这样：

new HardSourceWebpackPlugin({ cacheDirectory: '...', info: { mode: 'debug', color: true } })

然后看启动日志里有没有类似 HardSourceWebpackPlugin: loading cache for configuration 这种信息，如果没出现，说明它压根没找到可复用的缓存。

还有一个容易忽略的点是 node_modules 里某些依赖如果用了动态 require 或者路径判断（比如 __non_webpack_require__ 或者 process.cwd()），也会导致 hard-source 判定上下文变了，从而不走缓存。

最后说个更实在的：hard-source 在 2022 年之后基本没人维护了，作者自己也建议在 webpack5 + terser5 的环境下改用其他方案，比如 cache-loader 单独用，或者直接上 esbuild 做构建加速，真要追求构建速度，我后来都切到 swc + rspack 了，硬缓存那套现在真不太靠谱。

2026-02-27 12:15