Как заставить работать asset/source в webpack 5 с помощью query и chainWebpack?

Question

[Антон Антон]

Хочу загрузить svg как строку, если он указан в коде как
import icon from 'icon.svg?raw'
Пытаюсь сделать так:

chain.module.rule('svg').test(/\.svg$/).oneOf('raw').resourceQuery(/raw/)
          .type('asset/source').end()
          .type('asset/resource')

но не выходит.

Подскажите, как правильно?

Comments

[Антон Антон]

Финский Мачо, там, вроде, не по строке импорта, а по имени файла?

Answer 1

[Антон Антон]

В общем, какой-то конфликт в правилах, там было старое правило на картинки:

{
    test: /\.(png|jpe?g|gif|svg|webp|avif|ico)(\?.*)?$/, // тут все равно только полное имя файла, без query string, может быть наследие четвертого вебпака
    type: 'javascript/auto',
    use: [
      {
        loader: 'url-loader',
        options: {
          esModule: false,
          limit: 10000,
          name: 'img/[name].[hash:8].[ext]'
        }
    ],
  }

которое перебивало мое правило

{
        test: /\.svg$/,
        resourceQuery: /raw/,
        type: 'asset/source',
      }

независимо от того, выше мое правило в конфиге или ниже (может быть это особенность chainWebpack)

Добавил в старое правило resourceQuery: /^$/, заработало