javascriptwebpackwebpack-4urlloaderwebpack-loader

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


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?


Solution

  • 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