Rule with resourceQuery when there’s no query

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
It’s impossible to perform a rule based on resourceQuery condition if a module has no query at all. That module won’t pass directly.

If the current behavior is a bug, please provide the steps to reproduce.
I have this case where there are resources of the same extension that some are loaded in a certain way an some in another. I can reach it using resource queries.

So I can write some config like this:

{
  module: {
    rules: {
      {
        test: /\.ext$/i,
        resourceQuery: {
          exclude: /\?another/i,
        },
        loader: 'normal-loader'
      },
      {
        test: /\.ext$/i,
        resourceQuery: /\?another/i,
        loader: 'another-loader'
      }
    }
  }
}

So I want that .ext files get loaded with normal-loader. Except the ones with ?another query, these will load with another-loader.

But here’s the result:

  • path/to/module.ext?another: loaded with another-loader
  • path/to/module.ext?asdfg: loaded with normal-loader
  • path/to/module.ext: none, but we were naturally expecting normal-loader

I guess there’s a problem with the logic around here:
https://github.com/webpack/webpack/blob/v2.2.0-rc.0/lib/RuleSet.js#L361
It’s skipping the condition and rejecting directly if resourceQuery is empty and there’s a condition.

What is the expected behavior?
It must be able to test a resourceQuery condition in an empty query.

Please mention other relevant information such as the browser version, Node.js version, Operating System and programming language.
Node.js: v7.2.1
Webpack: v2.2.0-rc.0

Author: Fantashit

4 thoughts on “Rule with resourceQuery when there’s no query

  1. I also find this not very intuitive and using oneOf adds a lot of duplication to rules in this scenario.
    My use case was to support foo.svg, foo.svg? on rule X and foo.svg?inline on rule Y.

    To avoid duplication I used babel-plugin-transform-rename-import like so:

    [require.resolve('babel-plugin-transform-rename-import'), {
        original: '^(.+)\\.svg$', replacement: '$1.svg?',
    }],
  2. {
      test: /\.(png|jpe?g|gif|svg)$/,
      oneOf: [
        {
          resourceQuery: /inline/, 
          loader: 'url-loader',
          options: {
            limit: 10000,
            name: 'img/[name].[hash:7].[ext]'
          }
        },
        {
          loader: 'file-loader',
          options: {
            name: 'img/[name].[hash:7].[ext]'
          }
        }
      ]
    }

    An array of Rules from which only the first matching Rule is used when the Rule matches.

    May this config help you

    • path/to/foo.png?inline: loaded with url-loader
    • path/to/foo.png?other: loaded with file-loader
    • path/to/foo.png: loaded with file-loader

Comments are closed.