Полный цикл в digital

Сборка в Webpack

Webpack позволяет регулировать режим сборки проекта. Существуют три режима:

  1. development для разработки, в этом режиме собирается код удобным для разработки образом
  2. production для прода, в этом режиме код будет минифицирован, чтобы уменьшить его размер и увеличить скорость загрузки
  3. none режим по умолчанию, без оптимизации и подробных отчётов об ошибках и предупреждениях

Смена режима сборки

Режим сборки регулируется в файле конфигурации с помощью настройки mode.

Давайте укажем режим разработки development:

webpack.config.jsexport default {
  mode: 'development',
  entry: './src/index.js',
};

А теперь укажем продакшн режим production:

webpack.config.jsexport default {
  mode: 'production',
  entry: './src/index.js',
};

Сборки через scripts

Можно задавать режим сборки не файле конфигурации, а через настройку scripts файла package.json. Сейчас в этом файле у нас расположена команда build, которая собирает проект в том режиме, который указан в файле конфигурации:

package.json"scripts": {
  "build": "webpack"
}

Давайте добавим команду, собирающую проект в режиме разработки и продакшн:

package.json"dev": "webpack --mode development"
"prod": "webpack --mode production"

В итоге наш файл package.json станет выглядеть следующим образом:

package.json"scripts": {
  "build": "webpack",
  "dev":   "webpack --mode development",
  "prod":  "webpack --mode production",
}

Теперь в терминале мы сможем различными командами вызывать сборку в различных режимах:

npm run dev
npm run prod

Автоматическая сборка

Можно сделать так, чтобы Webpack отслеживал изменения файлов проекта и сам каждый раз запускал сборку. Для этого в scripts нужно внести следующую настройку:

package.json"watch": "webpack --mode development --watch"

В итоге наш файл package.json станет выглядеть следующим образом:

package.json"scripts": {
  "build": "webpack",
  "dev":   "webpack --mode development",
  "prod":  "webpack --mode production",
  "watch": "webpack --mode development --watch"
}

Запустить отслеживание файлов можно следующей командой:

npm run watch
Заполните форму уже сегодня!
Для начала сотрудничества необходимо заполнить заявку или заказать обратный звонок. В ответ получите коммерческое предложение, которое будет содержать индивидуальную стратегию с учетом требований и поставленных задач
Работаем по будням с 9:00 до 18:00. Заявки, отправленные в выходные, обрабатываем в первый рабочий день до 12:00.
Спасибо, ваш запрос принят и будет обработан!
Эйч Маркетинг