Как работать с зависимостями в Webpack?

Как с помощью webpack автоматически прикреплять только те css\js файлы, которые используются?

Например, есть десять компонент и они разбиты по папкам - это шаблоны (pug) у которых есть стили (css) и поведение (js).
На одной странице используется первый, второй и пятый шаблон, на другой седьмой, третий и десятый и т.д. Соответственно, для каждой страницы нужно догружать css и js файлы соответствующие шаблонам, а так же шаблоны от которых зависят эти шаблоны.

Возникает проблема с ручным прописыванием импортов, если страниц множество. Как минимум потому, что некоторые компоненты зависят от других, а в уме держать все эти зависимости утомительно и непродуктивно.

Как сделать, чтобы webpack учитывал зависимости используемых компонент во время сборки?

Я так понимаю, что можно создать js файл с зависимостями - где будет указано, что нужен такой-то css, такой-то другой шаблон pug (со своими зависимостями, которые тоже надо учитывать), такой-то скрипт js. Но чем это обрабатывать в webpack, в каком порядке и в какое время - совершенно не ясно.
И при этом нужно ничего не дублировать лишний раз.
  • Вопрос задан
  • 88 просмотров
Пригласить эксперта
Ответы на вопрос 2
delphinpro
@delphinpro Куратор тега Sass
frontend developer
Разбиваете на несколько точек входа
Настраиваете SplitChunkPlugin
Ответ написан
profesor08
@profesor08
Вручную, либо пишешь скрипт а 10 строк, который пробегается по папкам, собирает файлы и генерирует на их основе точки входа - https://webpack.js.org/concepts/entry-points/

Потом в HTMLWebpakcPLugin указываешь для файлов список чанков, которые соответствуют нужному entry или предыдущего шага.

В самих файлах, указанных в entry, подрубаешь нужные зависимости.

Таким образом у тебя на каждой странице будут только нужные стили и скрипты.

А если настроишь SplitChunkPlugin, из предыдущего ответа, то получишь более оптимизированные файлы, где общий код будет отдельно, а частный только в нужных файлах.
Ответ написан
Ваш ответ на вопрос

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

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