Как добавить файлы стилей в один бандл с js?

Question

[Константин]

Как добавить файлы стилей в один бандл с js?

Хотя бы наводка нужна.

И интересно, что вебпак делает по капотом, как при чтении js файла браузер распознает что есть стили а что код? По идеи js имеет механизм создания тега и вставки в него стилей.

Answer 1

[Дмитрий Беляев]

Webpack из коробки работает только с JS кодом, и обрабатывает его только в .js файлах.
Для обработки файлов других форматов используются лоадеры, которые преобразуют один код в другой.
В конфиге webpack можно описать правила, что на файлы с именем определенного формата применяются определенные лоадеры.
Лоадеры обычно выполняют какую-то одну трансформацию. Так же лоадеры можно выстраивать в цепочки, получая серию трансформаций. Финальный лоадер (тот что левее в списке) обязательно должен выдавать на выходе JS код.

Вставку CSS на лету в браузер умеет делать style-loader, но работает он не с CSS, а с выводом css-loader, который как раз отвечает за преобразование CSS в JS строку.

Comments

[Константин]

Ваши ответы бесценны!