Alexanevsky
@Alexanevsky
Любительская web-разработка

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

В 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ом, чтобы он мне грузил содержание файла, а не его название?
  • Вопрос задан
  • 22 просмотра
Решения вопроса 1
Alexanevsky
@Alexanevsky Автор вопроса
Любительская web-разработка
Сам спросил - сам ответил.

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

const icon = require('!raw-loader!path-to.svg').default;
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Flying
Если вы в Webpack используете какой-то специальный loader - то почему вы рассчитываете что Webpack Encore как-то магически тоже будет его использовать?

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы