Мудрое здание с Webpack

Question

У меня есть требование, чтобы сделать сборку webpack на основе бренда (используйте для сборки специфичные для бренда css). Я хочу передать бренд в качестве инструмента при строительстве. например, у меня есть 2 бренда brandA и brandB, у меня будут команды сборки, как показано ниже.

• npm build --brandA
• npm build --brandB

Есть ли решение для этого вида бренда в веб-пакете? Пожалуйста помоги.

Answer 1

Да, вебпак действительно хорош в подобных вещах, когда вы с ним познакомитесь. Есть несколько разных способов, которыми вы могли бы подойти к нему, но все они связаны с тем, как вы настраиваете конфигурацию вашего веб-пакета.

1. Напишите отдельные файлы конфигурации для каждого "бренда". Это наиболее близко соответствует вашему примеру, потому что в веб-пакете есть флаг CLI для указания используемого файла конфигурации, например webpack --config webpack.config.brand-a.js

2. Но большая часть конфигурации вашего веб-пакета, вероятно, будет одинаковой для каждого бренда (особенно если меняется только CSS). Поэтому вместо того, чтобы иметь дублирующийся код, вы разделяете части, которые одинаковы в конфигурационном файле каждого бренда, возможно, помещая каждый кусок в каталог /webpack в корне вашего проекта как отдельные маленькие модули JS. Итак, у вас есть модуль для конфигурации загрузчика, и один для конфигурации плагина и т. Д., И каждый из ваших файлов конфигурации require/import те. Теперь в ваших конфигурационных файлах гораздо меньше шаблонов, и в основном это просто части, которые отличаются от сборки к сборке.

3. Как только вы начнете разделять конфигурацию вашего веб-пакета, есть много способов его организовать. Хотя обычным форматом конфигурации веб-пакета является экспорт одного объекта конфигурации, он также позволяет вам экспортировать массив объектов конфигурации из вашего файла конфигурации - в этом случае веб-пакет будет выполнять отдельную сборку для каждого объекта конфигурации в экспортированном массиве. Так что еще один способ реализовать это будет один webpack.config.js файл, в котором вы пишете небольшой код для перебора марок и для каждого из них помещаете объект конфигурации в массив, а затем экспортируете весь массив. Преимущество здесь в том, что вы можете запускать все сборки одной командой, поскольку webpack заботится о создании отдельных процессов для каждой сборки.

4. Слово предостережения - время сборки может стать довольно здоровенным. (Хотя я не углублялся в это с v1.x, и, возможно, все стало лучше.) Если вы много строите, вы можете обнаружить, что стоит ускорить процесс оптимизации веб-пакетов.