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

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 3

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 4

I had a very similar problem, except webpack was caching a CSS file. My angular workspace doesn't have a node_modules/.cache folder, but I deleted the .angular/cache folder and that solved my problem. I also had to stop and restart the ng serve command after deleting that folder

Answer 5

You can set cache: false in webpack config. This worked for me on Next.js.

Answer 6

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.

Answer 7

ng cache clean

Based on the documentation

Answer 8

To force clearing cache in the browser, you could load the generated js bundle file dynamically with javascript with a query parameter in the src attribute, then call a function to execute other scripts when the file is loaded:

<script type="text/javascript">
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.onload = function () {
        init(); // call other scripts when this file is fully loaded
    };
    script.src = 'dist/bundle.js?v='+Date.now();

    document.getElementsByTagName('body')[0].appendChild(script);
</script>

<script>
    function init(argument) {
        // other scripts
        console.log('dist/bundle.js is loaded from the server not from the cache')
    }
</script>

see: Dynamically load JS inside JS

Answer 9

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.