How to exclude specific files from caching

Question

I'm using config-overrides.js with string-replace-loader in order to change the content of a file before being compiled by webpack.

But because of the caching system of webpack (cache option) the loader is not being executed, if I set cache = false everything works just fine (exactly like the production build).

I've spent several hours trying to understand how to exclude a file from caching, but whatever I've found does not work as expected and I'm kinda out of ideas.

Is there any way to achieve this without completely disabling the caching system?

Answer 1

[EDIT] I know the question asks about files, but my problem was related to the index.js file which imports a component conditionally based on a specific value inside an external config file.

After some more couple of hours of investigating I've found what I was looking for.

Here is the official documentation regarding this exactly use case.

Basically what we can do to invalidate the cache is to use the cache object as below:

cache = {
      type: 'filesystem',
      version: `${any external variable/value which may change in the future}`, // Keep the `${}`
};

cache.version is a string. Passing a different string will invalidate the persistent cache.

I'm using it like this and it's working great so far.

const invalidateCacheValues = [
  config.my_value_0,
  config.my_value_1
];

webpackConfig['cache'] = {
  type: 'filesystem',
  version: `${invalidateCacheValues.join('|')}`,
};