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?

score 3 · Answer 1 · answered Jul 10 '17 at 08:03

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.

John Mee · Answer 2 · 2019-05-19T02:56:42.443

1

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.

edited May 19 '19 at 02:56

answered Nov 22 '16 at 21:59

John Mee

44,003
31
133
171

8

webpack has cache – atilkan Mar 19 '18 at 11:33

Seyhan · Answer 3 · 2019-04-19T04:53:31.977

1

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.

edited Apr 19 '19 at 04:53

answered Apr 19 '19 at 04:40

Seyhan

605
7
9

1

My [contenthash] is changing and I confirmed that BUT the browser still uses the previous [contenthash] in the browser. i.e. the browser does not reload automatically. How does the browser detect the new [contenthash] js file?? – logixplayer May 21 '20 at 13:01

score 0 · Answer 4 · answered Apr 29 '21 at 16:24

0

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

answered Apr 29 '21 at 16:24

Fernando Vieira

2,302
22
23

score -1 · Answer 5 · answered Jun 11 '20 at 13:05

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

Clearing Webpack cache

5 Answers5