清除Webpack缓存

Question

如何强制清除webpack的缓存？

我正在使用threejs和webpack进行很多工作，但出现了一个问题，原因我不知道，就是它在内存中有两个threejs副本。以下是错误信息：

该文件未位于应用程序文件夹中的隐藏文件夹中，而是位于webpack内存中，可以通过Chrome Dev工具找到 - 例如：

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

- Katana24

Answer 1

你可以删除文件夹 "node_modules/.cache" 以强制Webpacker/Babel重新构建它们的缓存。

- Fernando Vieira

---

我之前使用 eslint-loader 时遇到了一个问题，出现了有关先前文件系统状态的错误。删除该目录似乎解决了这个问题。 - daniels

和@daniels一样。我收到了关于不存在的导入的警告。删除.cache并让它重新构建.eslintcache似乎解决了这个问题。 - Jarrod McGuire

Answer 2

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

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

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

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

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

- Benny Code

Answer 3

如果这能帮到其他人，我有一个类似的情况，问题在于我的导入语句中有一个大写字母。例如，我有这样一行代码：

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

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

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

一切都恢复正常了。

- Joe.b

Answer 4

我遇到了一个类似的问题，只是webpack缓存了CSS文件。我的angular工作区没有node_modules/.cache文件夹，但是删除了.angular/cache文件夹后问题得到了解决。在删除该文件夹后，我还必须停止并重新启动ng serve命令。

- NJS

Answer 5

您可以在webpack配置中设置cache: false。这对我在Next.js上运行时有效。

- Jeremy Smith

Answer 6

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

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

- John Mee

---

Webpack有缓存。 - atilkan

Answer 7

ng cache clean

基于文档

- Simple Dev

Answer 8

为了强制清除浏览器缓存，您可以使用JavaScript动态加载生成的JS捆绑文件，并在src属性中添加查询参数，然后调用一个函数在文件加载时执行其他脚本：

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

参见：在JS中动态加载JS

- Eissa

Answer 9

Webpack没有缓存，但浏览器有。Webpack编译生成的文件可以保持缓存，除非它们的内容发生了变化。在文档中，他们解释说为了解决这个问题，你可以在输出文件名中添加[contenthash]。

[contenthash]替换将基于资产内容添加唯一哈希。当资产内容更改时，[contenthash]也会更改。

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

PS：我正在使用Webpack v4.30.0

更多信息，请查看Webpack缓存指南。

- Seyhan

---

我的[contenthash]已经更改并确认过了，但是浏览器仍然在使用浏览器中的上一个[contenthash]。即浏览器没有自动重新加载。浏览器如何检测新的[contenthash] js文件？ - logixplayer