Почему Webpack Encore грузит только имя файла, а не его содержимое (require().default)?

Question

[Alexander Lashchevsky]

В JS-файлике есть что-то вроде этого:

const icon = require('path-to.svg').default;
div.innerHTML = icon;

Когда я собираю свои ассеты с помощью обычного Webpack 5.6.0 и лоадером: {test: /\.(svg)$/, loader: 'raw-loader'} то получаю нормальный результат:

<div><svg>...</svg></div>

Если же я тот же самый скрипт собираю с Webpack Encore (с добавлением такого же лоадреа и без него), то результат иной:

<div>path-to.svg</div>

Просто имя файла, а не его содержание!

Как добиться такого же, как при обычном Webpack, поведения при сборке Encorом, чтобы он мне грузил содержание файла, а не его название?

Answer 1

[Alexander Lashchevsky]

Сам спросил - сам ответил.

Нужно просто установить через npm/yarn raw-loader (если ещё не установлен) и добавить в путь файла require:

const icon = require('!raw-loader!path-to.svg').default;

Answer 2

[Flying]

Если вы в Webpack используете какой-то специальный loader - то почему вы рассчитываете что Webpack Encore как-то магически тоже будет его использовать?

Простая проверка списка зависимостей покажет вам что raw-loader в список зависимостей не входит, а значит с точки зрения Webpack Encore, как и с точки зрения Webpack (где он есть только в dev.dependency) он является custom loader'ом что явно должно было привести вас к соответствующему разделу документации.

Comments

[Alexander Lashchevsky]

В Webpack Encore я этот же самый лоадер добавил в webpack.config, поэтому был уверен, что он отработает точно также.

В общем проблему решил другим образом, благодарю за проявленное внимание к вопросу.