解决 webpack5 loader 缓存问题以适应动态行为

发布日期： 2024-10-24 阅读量： 作者： 网络

webpack5 缓存机制与 loader 缓存管理

在使用 webpack5 时遇到 loader 缓存机制问题？本文将探讨如何排除此问题，并在不破坏缓存机制的情况下维护 loader 的动态行为。

问题：

开发了一个 webpack loader，它根据参数从指定的 vue 文件动态引入 vue 组件。但是，由于 webpack5 的缓存机制，在首次启动项目后更改参数不会触发 loader，而是从缓存中加载组件。

解决方法:

方法一：禁止缓存

webpack loader 提供了一个名为 this.cacheable 的方法，它允许开发者禁用特定文件的缓存。为此，可以在 loader 的初始化阶段将 this.cacheable 设置为 false：

this.cacheable && this.cacheable(false);

随便看看