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

Question

I want to display some specific images as data-uri instead of linking to the image location. For that I'm using the url-loader.

Here's my HTML (pug template):

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

And my webpack related config:

     {
        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
        },

The other images load fine, but the inline don't. Can I use those sort of parameters in the filename?

score 4 · Accepted Answer · answered Mar 12 '20 at 12:05

resourceQueries may be the best bet:

{
    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
    }

Note that both rules will be processed as image.jpg?inline image will match both rules so you many have to set up a separate resourceQuery

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

1 Answers1