webpack 5 缓存机制中的 loader 缓存问题

当使用 webpack 5 开发一个根据参数导入 vue 组件的 loader 时，可能会遇到以下问题：

问题：

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

由于 webpack 5 的缓存机制，第一次启动项目后更改参数不会触发 loader，因为它取用了缓存。如何处理这种情况，既保持缓存机制，又指定某些文件不走缓存？

解决方案：

根据 loader 的方法 this.cacheable，可以禁止缓存。具体步骤如下：

// loader.js

module.exports = function (source) {
  if (/\.vue$/.test(this.resourcePath)) {
    this.cacheable(false); // 禁止缓存
  }

  // 其他loader代码...
};