动态需要webpack3查询字符串？还是单个文件，多个输出？

Question

我正在为webpack编写图像处理加载程序。我希望我的加载器非常简单和通用，以便它可以很容易地与其他加载器链接：输入图像，通过基于加载器配置的一系列操作运行图像（调整大小，转换等），输出图像。

在我的用例中，我想使用这个加载器来创建单个图像的多个版本，例如：响应式布局的不同大小;适用于支持它们的浏览器的webp版本;等

这可能有用的一种方法是在我的webpack配置规则中使用resourceQuery测试：

...
rules: [
  {
    test: /\.jpe?g$/,
    oneOf: [
      {
        resourceQuery: /webp/,
        loaders: [
          'file-loader',
          /* configure my loader to generate webp files */
        ]
      },
      {
        resourceQuery: /size1024/,
        loaders: [
          'file-loader',
          /* configure my loader to resize to a width of 1024 */
        ]
      },
      // etc...
      {
        /* no resourceQuery - default processing for an image */
        loaders: [ 'file-loader' ]
      }
    ]
  }
]
...

如果我使用import转换图片，则此方法有效：

import webpImage from '../assets/image.jpg?webp'

但是，我说我的图像在一个数组中，所以我想require他们......这有效：

images.map(path => require(`../assets/${path}`))

但添加查询字符串不似乎有用（＆＃34;无法找到模块＆＃34;是错误）：

images.map(path => require(`../assets/${path}?webp`))

是否有一些神奇的webpack咒语可以做这样的事情？我愿意接受其他建议来实现我的目标。例如，我已经考虑过使用多重加载器只需要一次图像而没有任何查询字符串，但是多加载器只导出最后一个加载器的结果。如果它从所有加载器导出数组或某种键/值哈希值，那可能会有效，但它没有。