Clearing Webpack cache

Question

How do you go about forcing webpack to clear its cache?

I'm doing a-lot of work with threejs and webpack and for some reason, unbeknownst to me, it has two copies of threejs in memory. Here's the error:

This file isn't located in a hidden folder in the app folder but in webpacks memory found via the Chrome Dev tools - i.e.

So is there anyway to force webpack to clear it's cache?

Answer 1

You can delete the folder "node_modules/.cache" to force Webpacker/Babel to rebuild their caches.

Answer 2

In case this helps anyone else, I had a similar case and the issue was that in one of the files my import statement had an uppercase in the name. For example, I had

import {Person} from './model/Model';

Note that I had deleted the file ./model/Model.js but was still getting the error due to the import. Just change the import to be

import {Person} from './model/model';

and all is well again.

Answer 3

Webpack 5 stores the cache into node_modules/.cache/webpack (when using npm) or .yarn/.cache/webpack (when using Yarn Plug'n'Play API), see Persistent Caching.

You can deactivate the caching completely by setting cache: false in your webpack config.

If you just want to delete your cache, then please do the following:

1. Delete node_modules/.cache/webpack or .yarn/.cache/webpack
2. Restart your webpack build (just hot reloading is not enough as files will still be cached in-memory)

When using the webpackDevMiddleware, then the .cache directory is created on your first page visit. I had to restart my dev server after deleting .cache to see the effects of changed files within my "node_modules" directory.

Answer 4

Webpack doesn't have caching but browsers have. Files produced by Webpack compilation can remain cached unless their content has changed. On the documentation they explain that to solve this issue you can add [contenthash] to your output file names.

The [contenthash] substitution will add a unique hash based on the content of an asset. When the asset's content changes, [contenthash] will change as well.

module.exports = {
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist')
    }
};

PS: I'm using Webpack v4.30.0

For more, checkout Webpack's guide for caching.

Answer 5

As the warning says, you have two copies of three.js in directories which have the same effective name when you ignore capitalization: 'three' vs 'THREE' are the same.

If they are different then rename one of them. Or, if they are the same module, give them both an identical name, in lowercase.