Question

Webpack默认缓存加载器

说，我有以下装载机，

module.exports = function(source) {
  // Note I'm explicitly saying not to cache
  this.cacheable(false);
  return 'module.exports = ' + Math.random();
}

每次require('./asset.ext')，我都会得到相同的随机数。如何从同一资源的加载器获得不同的输出。

我打算在哪里使用它？

我想在JS和CSS中require('./image.png')。在css css-loader中，帮助我实现这一点，url(./image.png)被视为需要。装载者不了解发行人。所以我写了一个插件，告诉加载器关于发行者并且工作正常。但是当我开始在CSS和JS中使用它时，无论先调用哪个，加载器都会缓存输出，并返回相同的输出。我想阻止这个。对于JS，我想返回一个对象，对于CSS，我想返回一个字符串。

Answer 1

有点hacky，但为什么不只是创建一个从image.png到image-copy.png的符号链接，然后使用一个文件名用于JS和另一个文件名用于CSS？就需求而言，它们是两个不同的文件，因此它会再次加载它。

Answer 2

回答我自己的问题，

我没有尝试不缓存加载器，而是为返回的Object编写了一个覆盖toString，因此在CSS中需要时，会触发此方法并获取所需的字符串。

在这里实施 - https://github.com/boopathi/image-size-loader/blob/master/index.js#L14-L19

module.exports = JSON.stringify(o);
module.exports.toString = () => JSON.stringify(o.src);

如何不缓存加载器输出？

我打算在哪里使用它？

2 个答案: