Шаг 1. Начало работы

В этой демонстрации мы будем работать с проектом — счётчиком. Его исходники лежат здесь.

Наша цель — разобраться, как на практике работают плагины, и научиться управлять ими более гибко, нежели предлагает команда init.

С помощью плагинов нам нужно разнести логику разработки по разным файлам в зависимости от режимов.

Мы уже поверхностно затрагивали тему режимов. Напомним, они отвечают за то, какие плагины применятся и когда, а также будет ли код оптимизирован (минимизирован). Например, в режиме разработки код не минимизирован и размер бандла (файлов на выходе) может достигать колоссальных размеров. А в production-режиме код будет сжат и преобразован в нужный нам синтаксис. Подробнее о режимах мы поговорим в следующем разделе.

Мы разделим конфиг на четыре разных файла, используя webpack-merge. Разделение и вынесение кода (его логики, отдельных частей) по разным файлам и директориям — хорошая практика. Она не только позволяет нам легче ориентироваться в файловой системе проекта, но и чётко разделяет проблемы, а также облегчает тестирование, обеспечивая согласованность в отношении роли и места различных частей кода (компонентов) в проекте.

Файлы делим на несколько условных категорий (у каждого они могут быть свои):

1. Основной файл — webpack.config.js. В нём не будет ничего интересного, кроме кода, подключающего все остальные файлы.
2. base или basic (webpack.base.js). Здесь будем хранить весь общий конфиг.
3. dev (сокращённо от development, webpack.dev.js). В этом файле будет конфиг, связанный с разработкой проекта: настройка dev-сервера и дополнительных вещей к нему.
4. prod (сокращённо от production, webpack.prod.js). В этот файл мы будем складывать те вещи, которые должны применяться во время сборки проекта в продакшн-режиме, то есть непосредственно перед деплоем.