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

Question

我想将一些特定的图像显示为数据uri，而不是链接到图像位置。为此，我使用url加载程序。

这是我的HTML(pug模板(：

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