javascript - Webpack 模块规则测试：匹配包含特定参数的文件

Question

我想将一些特定图像显示为 data-uri 而不是链接到图像位置。为此，我正在使用 url-loader。

这是我的 HTML（哈巴狗模板）：

img.loading(:src="require('@/images/spinner.png?inline')")

还有我的 webpack 相关配置：

     {
        test: /\.(png|jpg|gif|svg|ico)\?inline$/,
        loader: 'url-loader',
        options: {
          limit: 135000,
          name: 'img/[name].[hash].[ext]',
          esModule: false
        }
      },
      {
        test: /\.(png|jpg|gif|svg|ico)$/,
        loader: 'file-loader',
        options: {
          name: 'img/[name].[hash].[ext]',
          esModule: false
        },

其他图像加载正常，但内联没有。我可以在文件名中使用这些参数吗？

Answer 1

resourceQueries可能是最好的选择：

{
    test: /\.(png|jpg|gif|svg|ico)$/,
    resourceQuery: /inline/
    loader: 'url-loader',
    options: {
      limit: 135000,
      name: 'img/[name].[hash].[ext]',
      esModule: false
    }
  },
  {
    test: /\.(png|jpg|gif|svg|ico)$/,
    loader: 'file-loader',
    options: {
      name: 'img/[name].[hash].[ext]',
      esModule: false
    }

请注意，这两个规则都将被处理，因为image.jpg?inline图像将匹配这两个规则，因此您必须设置一个单独的resourceQuery