如何在不关闭Webpack缓存的前提下排除特定文件缓存？

下面是几个经过验证的可行方案，可根据场景选择：

方案1：给string-replace-loader添加强制缓存失效标识 #

在loader配置的options里加入随构建变化的标识（比如时间戳），让Webpack识别到loader配置有更新，从而跳过缓存重新执行处理。

示例config-overrides.js代码：

const { override, addWebpackModuleRule } = require('customize-cra');
const path = require('path');

module.exports = override(
  addWebpackModuleRule({
    test: /target-file\.js$/, // 匹配你要处理的目标文件
    use: [
      {
        loader: 'string-replace-loader',
        options: {
          search: '要替换的内容',
          replace: '替换后的内容',
          // 添加该标识，每次构建都会变化，强制Webpack重新执行loader
          cacheBust: Date.now()
        }
      }
    ]
  })
);

方案2：精准配置Webpack缓存排除规则 #

若之前的exclude配置未生效，大概率是路径匹配错误。Webpack的cache.exclude支持正则或绝对路径数组，需确保匹配目标文件的准确路径。

示例config-overrides.js代码：

const { override } = require('customize-cra');
const path = require('path');

module.exports = override(
  (config) => {
    config.cache = {
      ...config.cache,
      exclude: [
        // 用绝对路径匹配单个目标文件
        path.resolve(__dirname, 'src/path/to/target-file.js'),
        // 用正则匹配一类文件
        /src\/some-dir\/.*\.js$/
      ]
    };
    return config;
  }
);

方案3：让Webpack监控替换规则的依赖文件 #

如果替换内容来自外部配置文件，可将该文件加入Webpack缓存依赖列表，当文件变化时自动触发重新编译。无外部文件时，也可手动创建空文件作为触发标识，修改它来强制执行loader。

示例config-overrides.js代码：

const { override } = require('customize-cra');
const path = require('path');

module.exports = override(
  (config) => {
    config.cache = {
      ...config.cache,
      buildDependencies: {
        ...config.cache?.buildDependencies,
        // 添加依赖文件，文件变化时Webpack会清空相关缓存
        replaceConfig: path.resolve(__dirname, 'replace-rules.json')
      }
    };
    return config;
  }
);

方案4：单独禁用string-replace-loader的缓存 #

直接给该loader设置cache: false，无需全局关闭Webpack缓存，只影响目标loader的处理逻辑，是最直接高效的方案，推荐优先尝试。

示例config-overrides.js代码：

const { override, addWebpackModuleRule } = require('customize-cra');

module.exports = override(
  addWebpackModuleRule({
    test: /target-file\.js$/,
    use: [
      {
        loader: 'string-replace-loader',
        options: {
          search: '旧内容',
          replace: '新内容'
        },
        // 单独禁用这个loader的缓存
        cache: false
      }
    ]
  })
);

内容的提问来源于stack exchange，提问作者Mutu A.