通过 Webpack Require Context 将查询参数传递给 Loader

Question

我正在使用 webpack 的 require.context to require a directory of thumbnail images. Furthermore in my webpack config file I am implementing a responsive-loader 来构建每个图像的各种分辨率。

当我需要缩略图目录时，我想手动将查询参数传递给响应式加载程序以构建宽度为 128 和 256 的图像。

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

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

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

那个代码returns这个错误。

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)

Answer 1

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

示例：

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

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

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

通过 Webpack Require Context 将查询参数传递给 Loader

Pass Query Parameters to Loader via Webpack Require Context

javascript

commonjs

node.js

webpack