通过Webpack Require Context将查询参数传递给加载器

Question

我正在使用webpack的require.context来引用缩略图图像目录。此外，在我的webpack配置文件中，我正在实现一个responsive-loader来构建每个图像的各种分辨率。

当我需要缩略图目录时，我想手动传递一个查询参数给responsive-loader，以仅构建128和256宽度图像。

如何通过webpack的require.context方法传递查询参数？

这是我到目前为止的代码...

thumbnailContext.keys().forEach(thumbnailPath => {
    thumbnailContext(`${thumbnailPath}?sizes[]=128,sizes[]=256`)
})

那段代码返回了这个错误。

Uncaught Error: Cannot find module './First Post/thumbnail.png?sizes[]=128,sizes[]=256'
    at webpackContextResolve (webpack:///./src/posts_sync_thumbnail\.(:8080/png%7Cjpeg%7Cjpg)?:12:11)

- Dylan Landry

---

这个问题有解决方案吗？ - Zakalwe

Answer 1

您需要将参数作为require.context的第一个参数的一部分传递。

例如：

require.context('my-loader?sizes[]=128,sizes[]=256!./img', true, /\.png$/i);

如果您想忽略所有其他可能配置的加载器，请在前面加上!!

require.context('!!my-loader!./img', true, /\.png$/i);

- graup