Шаг 1. Введение

В этом демо мы рассмотрим работу webpack в зависимости от режимов. Работать будем с проектом счётчика.

Из предыдущих модулей у нас остался конфиг с файловой структурой, как показано ниже на скриншоте.

Что у нас есть:

1. Директория со страницами и относящимися к ним файлами стилей и скриптов.
2. Три изображения и один шрифт, который превышает предустановленный размер в 8 КБ.
3. Базовая несложная функциональность для каждой страницы. Лежит в директории src/js.
4. Конфиг webpack, разделённый на три отдельных файла: base, dev, prod.
5. Остальные конфиги: prettier, postcss.

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

Сейчас наши задачи:

• определить, как, куда и зачем добавлять зависимости;
• понять, как зависимости будут работать в разных режимах;
• ответить для себя на вопрос, зачем вообще это знать.

На последний пункт ответим сразу. Маловероятно, что джуну позволят вносить изменения в сборщике (бандлере), да и необязательно это будет webpack. Однако повторимся: webpack — наверное, самый сложный в понимании и конфигурировании. Его основы (добавление пакетов, их удаление и настройка) остаются неизменными и переходят от бандлера к бандлеру.

С опытом разработчика возрастает и ответственность. Вероятность того, что мидла попросят написать сборщик с «нуля» гораздо выше. Поэтому, если вы планируете расти дальше, вам нужно знать, как ведёт себя webpack в зависимости от режима разработки.

Исходники конфига вы можете посмотреть тут.