webpack5 缓存机制与 loader 缓存管理
在使用 webpack5 时遇到 loader 缓存机制问题？本文将探讨如何排除此问题，并在不破坏缓存机制的情况下维护 loader 的动态行为。
问题：
开发了一个 webpack loader，它根据参数从指定的 vue 文件动态引入 vue 组件。但是，由于 webpack5 的缓存机制，在首次启动项目后更改参数不会触发 loader，而是从缓存中加载组件。
解决方法:
方法一：禁止缓存
webpack loader 提供了一个名为 this.cacheable 的方法，它允许开发者禁用特定文件的缓存。为此，可以在 loader 的初始化阶段将 this.cacheable 设置为 false：
this.cacheable && this.cacheable(false);
方法二：使用原始依赖项
另一种方法是使用webpack的 原始依赖项 选项。通过将 dependency.filedependencies 设置为 loader.resourcepath，可以防止 webpack 将已缓存的模块用于 loader 结果：
module.exports.pitch = function(remainingRequest) {
const resolve = request => {
this.addDependency(request);
return request;
};
const importCode = this.emitFile(resolve('./dep.vue'));
return `export default function () { import { default as Foo } from ${importCode}; return Foo; }`;
};
module.exports.dependencies = class Dependencies {
constructor(loader) {
this.fileDependencies = loader.resourcePath;
}
};结论：
通过使用 this.cacheable 方法或原始依赖项选项，可以指定webpack5中的文件不走缓存，从而解决loader缓存机制与动态行为之间的冲突。
