inline loader not migrateable to webpack 5 when used in require.context

Bug report

What is the current behavior?

The documentation in https://webpack.js.org/guides/asset-modules/#replacing-inline-loader-syntax to replace inline loaders with Asset Modules does not apply to require.context. Specifically, it doesn’t seem like I can exclude a source asset from being parsed by other loaders. This was possibly in webpack 4 with require.context("!raw-loader!./code", false, /\.js$/); but there seems to be no API for this behavior in webpack 5 i.e.

{
  test: /\.m?js$/,
  resourceQuery: /^(?!\?raw$).*/,
},
{
  resourceQuery: /raw/,
  type: "asset/source",
},
{
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  use: ["babel-loader"],
},

does result in transpiled source assets.

If the current behavior is a bug, please provide the steps to reproduce.

1. Clone https://github.com/eps1lon/webpack-asset-modules-source-require-context
2. yarn install
3. `yarn start´
4. Open page

The source code is printed transpiled (notice the /*#__PURE__*/React.createElement transpilation artifact).

What is the expected behavior?

The source asset is not transpiled (or parsed by any other loader for that matter).

Other relevant information: webpack version: 5.21.1 Node.js version: 12.20.0 Operating System: Ubuntu 20.04.2 LTS Additional tools:

The issue seems similar to https://github.com/webpack/webpack/issues/5730?

[alexander-akait]

@eps1lon sorry, typo, I mean prioritize

Could you summarize how I would write the initial set of rules without changing the rule that applies the babel-loader?

Right now only using resourceQuery: /^(?!\?raw$).*/,, we need think more about it

[alexander-akait]

Intersect rules, please use:

module: {
    rules: [
      {
        type: "asset/source",
        resourceQuery: /raw/,
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        resourceQuery: /^(?!\?raw$).*/,
        use: ["babel-loader"],
      },
    ],
  },

otherwise test is preferred