javascript - Webpack模块规则测试: Match files that contain a specific parameter

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