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

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缓存机制与动态行为之间的冲突。