Posted in Uncategorized

Rule with resourceQuery when there’s no query

   February 23, 2021  4 Comments on 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”

  2. 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?',
}],
  3. {
  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.