Как работает webpack?

В своей самой простой форме webpack является сборщиком модулей javascript. Однако с момента его выпуска он превратился в таск менеджера всего вашего front-end проекта (по воле сообщества).

На картинке пример работы других менеджеров задач. Например, менеджер задач, такой как gulp, может работать с множеством различных препроцессоров и транспиляторов, во всех случаях он будет принимать исходные данные и сжимать их в скомпилированный вывод. Тем не менее, это делается в каждом конкретном случае без учета системы в целом. Это бремя разработчика: подобрать, где применить ту или иную задачу, и найти правильный способ, чтобы все части проекта слились воедино в процессе сборки.

Webpack пытается немного ослабить загрузку разработчика, задавая смелый вопрос: а что, если бы была часть процесса разработки, которая обрабатывала зависимости самостоятельно? Что, если бы мы могли просто написать код таким образом, чтобы процесс сборки управлялся сам, основываясь только на том, что нам необходимо в конце?

Давайте посмотрим на главную страницу webpack проекта.

Если вы в веб разработке в течение последних нескольких лет, вы уже знаете метод решения проблемы: решить их с помощью javascript. И поэтому webpack пытается упростить процесс сборки путем подтягивания зависимостей через javascript. Но истинная сила его дизайна не просто управление кодом. Это то, что управление на 100% проводится через javascript (с функциями Node.js). Webpack дает вам возможность написать функциональный javascript, который лучше понимает систему в целом. Другими словами: вы не пишете код для webpack. Вы пишете код для своего проекта. И webpack его понимает (конечно, с некоторой конфигурацией).

Изображение на главной странице отражает принцип работы webpack лучше, как ни что другое. Все зависимости вашего проекта через javascript импорты собираются в один единый bundle, а затем выводятся в те файлы и в таком виде, как вы укажете в конфигурации.

В двух словах, если вы когда-либо боролись с любой из проблем из списка:

• подключение и загрузка зависимостей вне зависимости от их алфавитного или какого либо еще порядка.
• удаление неиспользуемого css или js в production.
• cлучайно дважды (или трижды) подключенные библиотеки.
• проблем с областью видимости - как в css, так и в javascript.
• ручное подключение библиотек, которых не нашлось в npm или вам нужно было их модифицировать, и вы включили их столь ужасным способом, что вам было стыдно.
• вам нужно было оптимизировать сборку assets, но вы боялись, что что-то сломаете и не стали трогать конфигурацию

... тогда вы будете счасливы с webpack. Он справляется со всем вышеперечисленными задачами без особых усилий, позволяя javascript беспокоиться о ваших зависимостях и порядке их загрузки вместо вашего мозга.