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 的影响是什么？的详细内容，更多请关注其它相关文章！