Rule with resourceQuery when there's no query

[daltones]

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

[sokra]

You can workaround this with a oneOf rule.

[webpack-bot]

This issue had no activity for at least half a year.

It's subject to automatic issue closing if there is no activity in the next 15 days.

[satazor]

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?',
}],

[adrianmarinica]

I ended up doing something like this for a similar issue I had. The fact that I had to move the specific files to a different folder didn't really help, but hey, at least it works.

{
    test: /\.svg$/,
    oneOf: [
        {
            exclude: path.resolve(__dirname, 'images/svg/css-icons/'),
            use: 'svg-inline-loader'
        },
        {
            include: path.resolve(__dirname, 'images/svg/css-icons/'),
            use: 'file-loader'
        },
    ],
},

[calledT]

{
  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

[dooks]

It was requested I address this issue in #5906

[qhxin]

same problem

[alexander-akait]

PR welcome

[vankop]

@sokra Is this issue relevant to webpack@5 (since RuleSet is reworked in webpack@5)? I could take a look on it, if it is relevant.

[webpack-bot]

This issue had no activity for at least three months.

It's subject to automatic issue closing if there is no activity in the next 15 days.

[alexander-akait]

bump

[maciej-gurban]

In case somebody else stumbles upon this looking to apply different loaders based on import path, the solution is pretty much what @calledT showcases in his answer.

What's important though, is that you're not limited to using resourceQuery to apply different rules - you can use test, include etc. - all the same API surface that each regular rule inside module.rules allows for.

[webpack-bot]

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.

[vankop]

@evilebottnawi such syntax is not possible with webpack@5, so I think this can be closed.