如何避免package.json版本变更导致Webpack缓存失效？

方法1：自定义Webpack缓存依赖，忽略version字段 #

Webpack默认会把整个package.json作为缓存依赖项，你可以通过配置cache.buildDependencies，只让Webpack监听package.json里影响构建的核心字段，排除version的变更影响。

修改Webpack配置文件：

const path = require('path');

module.exports = {
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename],
      // 自定义处理package.json内容，仅保留依赖相关字段
      package: (pkgPath) => {
        const pkg = require(pkgPath);
        // 剔除version，只保留影响构建的依赖字段
        const { version, ...relevantContent } = pkg;
        return JSON.stringify(relevantContent);
      }
    }
  }
};

这样Webpack只会根据依赖字段的变化判断缓存是否失效，version变更不会触发全局缓存重置。

方法2：将version字段抽离到单独文件 #

把version从package.json中拆分出来，放到独立文件（比如version.js或VERSION文本文件），发布时仅修改这个文件，不改动package.json。

• 新建version.js：

export const APP_VERSION = '1.0.1';

• 如果业务要求package.json中必须保留version，可以通过脚本同步：发布时先更新独立版本文件，再用脚本将版本号同步到package.json，但确保Webpack的缓存依赖不监听package.json的version字段。
• 因为独立版本文件的变更只会影响引用它的模块缓存，不会触发整个依赖解析流程的缓存失效，范围极小。

方法3：自定义Webpack缓存键生成逻辑 #

通过cache.key自定义缓存键的生成规则，让version的变更不影响全局缓存键的计算。

示例配置：

module.exports = {
  cache: {
    type: 'filesystem',
    key: (compiler) => {
      const pkg = require('./package.json');
      // 仅用依赖配置、Webpack配置等核心内容生成缓存键
      return JSON.stringify({
        dependencies: pkg.dependencies,
        devDependencies: pkg.devDependencies,
        webpackConfigHash: require('crypto').createHash('md5').update(JSON.stringify(require('./webpack.config.js'))).digest('hex')
      });
    }
  }
};

方法4：CI流水线直接缓存Webpack缓存目录 #

在CI环境中，将Webpack的默认缓存目录（node_modules/.cache/webpack）加入CI的缓存机制，同时用package-lock.json（或yarn.lock）的哈希作为缓存键——因为锁文件的哈希能准确反映依赖变化，version变更不会影响它。

以GitHub Actions为例，配置示例：

steps:
  - uses: actions/checkout@v4
  - uses: actions/setup-node@v4
    with:
      node-version: 20
  - name: Cache dependencies and Webpack cache
    uses: actions/cache@v3
    with:
      path: |
        node_modules
        node_modules/.cache/webpack
      key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
      restore-keys: |
        ${{ runner.os }}-node-

这样只要依赖没有变化，CI就会直接复用之前的Webpack缓存，跳过依赖重新解析步骤。

内容的提问来源于stack exchange，提问作者arash esmaealbeigi