Support resourceQuery in Turbopack rules

[kevva]

Goals

1. To make Turbopack handle bundling of some assets, but not all
2. Add the ability to exclude/include assets depending on their query

Non-Goals

N/A

Background

In our app we're currently still using Webpack due to incompatibilities with Turbopack. One of the larger ones is supporting bundling SVGs depending on the resourceQuery property in the Webpack loaders. For smaller icons that we need to be able to change color on etc, we bundle with svgr, but for larger SVG images we just let the URL loader handle it to avoid increasing the bundle size unnecessarily. The configuration looks like this:

const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'))

config.module.rules.push(
  {
    ...fileLoaderRule,
    test: /\.svg$/i,
    resourceQuery: /url/,
  },
  {
    test: /\.svg$/i,
    resourceQuery: { not: /url/ },
    use: ['@svgr/webpack'],
  },
)

So an import ending with .svg?url will not be bundled whereas the rest of the .svg imports will. This helps save bundle size greatly.

Proposal

I don't have a strong opinion on how this should be implemented, maybe you want to go the same route as Webpack, or maybe you have something planned for this already. But for someone who is eager to switch to Turbopack, I'm hoping that a stopgap solution would be fine in the meantime.

[kevva]

Probably a duplicate of #65360.

[mwaterman29]

need ^^

[kevva]

Hey @kdy1, I know you added support for this in #69703. However, it seems like you still can't pass a not filter in the config itself meaning you have to create a new loader and do the resourceQuery check inside. I want .svg imports ending with ?url (large SVGs) to be handled by file-loader (or ideally the default loader for turbo whatever name it has, can't find it) and the rest to be ran through svgr. However, that means that my loader can export two file types, .js and .svg which the loader configuration doesn't support.

Is this achievable in some way?