清除 Webpack 缓存答案

【问题标题】：Clearing Webpack cache清除 Webpack 缓存
【发布时间】：2017-04-06 04:02:32
【问题描述】：

如何强制webpack 清除其缓存？

我正在使用threejs 和webpack 做很多工作，出于某种原因，我不知道的是，它在内存中有两个threejs 副本。这是错误：

此文件不位于应用文件夹中的隐藏文件夹中，而是位于通过 Chrome 开发工具找到的 webpacks 内存中 - 即

那么有没有办法强制 webpack 清除它的缓存？

【问题讨论】：

【解决方案1】：

Webpack 5 将缓存存储到 node_modules/.cache/webpack（使用 npm 时）或 .yarn/.cache/webpack（使用 Yarn Plug'n'Play API 时），参见 Persistent Caching。

您可以通过在webpack config 中设置cache: false 来完全停用缓存。

如果您只想删除缓存，请执行以下操作：

删除node_modules/.cache/webpack或.yarn/.cache/webpack
重新启动您的 webpack 构建（仅热重新加载是不够的，因为文件仍将缓存在内存中）

使用webpackDevMiddleware 时，会在您第一次访问页面时创建.cache 目录。删除 .cache 后，我不得不重新启动我的开发服务器，以查看我的“node_modules”目录中更改的文件的效果。

【讨论】：

【解决方案2】：

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

【讨论】：

我遇到了一个问题，eslint-loader 抛出有关先前文件系统状态的错误。删除这个目录似乎已经解决了这个问题。
与@daniels 相同。收到关于不再存在的进口的警告。删除 .cache 并让它重建 .eslintcache 似乎可以解决问题。

【解决方案3】：

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

<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

【讨论】：

【解决方案4】：

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

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

【讨论】：

webpack 有缓存

【解决方案5】：

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。

【讨论】：

我的 [contenthash] 正在改变，我确认浏览器仍然在浏览器中使用以前的 [contenthash]。即浏览器不会自动重新加载。浏览器如何检测到新的 [contenthash] js 文件？？

【解决方案6】：

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

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

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

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

一切都好起来了。

【讨论】：