Как с помощью webpack автоматически прикреплять только те css\js файлы, которые используются?
Например, есть десять компонент и они разбиты по папкам - это шаблоны (pug) у которых есть стили (css) и поведение (js).
На одной странице используется первый, второй и пятый шаблон, на другой седьмой, третий и десятый и т.д. Соответственно, для каждой страницы нужно догружать css и js файлы соответствующие шаблонам, а так же шаблоны от которых зависят эти шаблоны.
Возникает проблема с ручным прописыванием импортов, если страниц множество. Как минимум потому, что некоторые компоненты зависят от других, а в уме держать все эти зависимости утомительно и непродуктивно.
Как сделать, чтобы webpack учитывал зависимости используемых компонент во время сборки?
Я так понимаю, что можно создать js файл с зависимостями - где будет указано, что нужен такой-то css, такой-то другой шаблон pug (со своими зависимостями, которые тоже надо учитывать), такой-то скрипт js. Но чем это обрабатывать в webpack, в каком порядке и в какое время - совершенно не ясно.
И при этом нужно ничего не дублировать лишний раз.
Потом в HTMLWebpakcPLugin указываешь для файлов список чанков, которые соответствуют нужному entry или предыдущего шага.
В самих файлах, указанных в entry, подрубаешь нужные зависимости.
Таким образом у тебя на каждой странице будут только нужные стили и скрипты.
А если настроишь SplitChunkPlugin, из предыдущего ответа, то получишь более оптимизированные файлы, где общий код будет отдельно, а частный только в нужных файлах.
Все стили, скрипты, шаблоны в отдельных файлах и директориях. Т.е. на каждый шаблон и его технологии отдельная директория. Таких штук сорок.
Я бы хотел, чтобы вебпак, если я вставляю шаблон, подключал самостоятельно его технологии (и шаблоны от которых он зависит и их технологии).
Т.е. например, я добавляю на страницу кнопку, а вебпак определяет из каких компонентов эта кнопка, подключает стили этих компонентов, скрипты и т.д.
Я понимаю, что звучит нереалистично, поэтому я придумал описывать технологии и зависимости в чём-то наподобие json.
Можно заставить вебпак считать все такие файлы - но тогда он загрузит кучу того, что не используется. Можно вбивать их вручную, но это так же, как мне кажется, не лучший подход. Наверняка можно автоматизировать процесс. Например, если вебпак видит include ./common.blocks/scroll/scroll.pug, то смотрит соответствующую директорию, находит scroll.deps.json, составляет по нему require с scss\js и т.д.
Т.е. чтобы вебпак по используемым шаблонам pug находил файл с зависимостями и технологиями и подключал необходимое.
Простой
Средний
Средний
