Webpack 5 缓存问题：如何避免 Loader 缓存？

从现在开始，我们要努力学习啦！今天我给大家带来《Webpack 5 缓存问题：如何避免 Loader 缓存？》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

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

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

问题：

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

解决方案：

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

// loader.js

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

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

到这里，我们也就讲完了《Webpack 5 缓存问题：如何避免 Loader 缓存？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！