webpack5 缓存对于自定义 loader 的影响是什么？

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《webpack5 缓存对于自定义 loader 的影响是什么？》，聊聊，我们一起来看看吧！

webpack5 缓存机制对自定义 loader 的影响

在编写 webpack loader 时，指定不同的参数以引入不同的 vue 组件。然而，在 webpack5 中，缓存机制存在一个问题。第一次启动项目后，后续更改参数并不会触发 loader，因为 webpack5 缓存了之前构建的结果。

对于需要缓存机制的场景，有两种解决方案：

禁用缓存

可以通过设置 loader 的 this.cacheable 属性为 false 来禁用缓存。这样，每次修改参数时都会重新触发 loader。

module.exports = function(source, map) {
  this.cacheable(false);
  // ...
};

指定文件不走缓存

如果只需要对某个特定文件禁用缓存，可以使用 webpack 的 cache 属性。

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'my-loader',
        options: {
          cache: false
        }
      }
    ]
  }
};

通过设置 cache 为 false，webpack 将不会缓存此文件的构建结果。

今天关于《webpack5 缓存对于自定义 loader 的影响是什么？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！