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

Question

我想将一些特定图像显示为数据 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

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

Webpack module rule test: Match files that contain a specific parameter

javascript

webpack

webpack-4

urlloader

webpack-loader