清除Webpack缓存

Question

如何强制webpack清除其缓存？

我正在与threejs和webpack进行大量工作，出于某些原因，我不知道，它在内存中有两个threejs副本。这是错误：

此文件并非位于app文件夹中的隐藏文件夹中，而是位于通过Chrome Dev工具找到的网络包内存中 - 即

那么无论如何都要强制webpack清除它的缓存？

Answer 1

如果这有助于其他人，我有一个类似的情况，问题是在其中一个文件中我的import语句名称中有一个大写。例如，我有

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

请注意，我删除了./model/Model.js文件但由于导入仍然出现错误。只需将导入更改为

即可

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

一切都很好。

Answer 2

正如警告所说，当您忽略大写时，您在目录中有两个three.js副本具有相同的有效名称：'three'与'THREE'是相同的。

如果它们不同，则重命名其中一个。或者，如果它们是相同的模块，请给它们两个相同的名称，小写。

Answer 3

Webpack不具有缓存，但浏览器具有。 Webpack编译生成的文件可以保留在高速缓存中，除非其内容已更改。他们在documentation上解释说，要解决此问题，您可以在输出文件名中添加[contenthash]。

  

[contenthash]替换将基于   资产的内容。当资产的内容更改时，[contenthash]   也会改变。

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

PS：我正在使用Webpack v4.30.0

有关更多信息，请结帐Webpack's guide for caching。

Answer 4

要强制清除浏览器中的缓存，您可以在src属性中使用带有查询参数的javascript动态加载生成的js捆绑包文件，然后在加载文件时调用函数以执行其他脚本：< / p>

<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>

请参阅：Dynamically load JS inside JS

Answer 5

您可以删除文件夹“node_modules/.cache”以强制 Webpacker/Babel 重建缓存。