6.1. Режим разработки

Режимы — это наборы правил или настроек для выполнения разных задач. К таким задачам относится оптимизация приложения после сборки, чтобы оно было быстрым и легковесным, без потери качества изображений, а также поддерживалось разными браузерами, вне зависимости от даты выхода в релиз.

В webpack есть три режима:

• development mode,
• production mode,
• none mode.

Мы используем и видим в большинстве случаев лишь два из них: development mode и production mode. А none — это режим, когда ни один из двух предыдущих не обозначен явно.

По умолчанию webpack сам решает, что ему нужен режим разработки. Если нам это не подходит, необходимо явно указать следующее:

// в файле webpack.dev.js
module.exports = {
  mode: 'development'
}
// в файле webpack.prod.js
module.exports = {
  mode: 'production'
}

Если переводить дословно, то без указания режима при сборке проекта с использованием команды npm run build webpack самостоятельно выбрал для себя development-режим и показал предупреждением о том, что лучше указывать режим явно.

Чтобы избежать таких предупреждений, можно выставить none, но мы не рекомендуем так делать. В none-режиме предсказуемость поведения webpack теряется, а большинство команд из package.json работают некорректно.

Использование разных режимов

Для сборки проектов мы использовали несколько команд:

• npm run build,
• npm run dev.

В package.json они выглядят так:

{
  "dev": "npx webpack --mode development --config webpack.config.js",
  "build": "npx webpack --mode production --config webpack.config.js"
}

Что происходит?

Вспомним, что npx — встроенная в Node.js утилита, которая позволяет запускать некоторые команды без run-скрипта — явного прописывания в package.json. То есть она позволяет запускать пакеты (вложенные в них функции, например npx eslint, проверяющий файлы на ошибки).

Так как мы пользуемся дополнительным пакетом webpack-merge, сборщику нужно явно указать, какой файл считать отправной точкой конфига. За это отвечает флаг --config webpack.config.js.

На флаге --mode остановимся чуть подробнее. В этой статье нас интересует development mode.

Development mode

Development mode — режим для разработки, упрощённо дев-режим. На нём работает сервер, а также может собираться проект. Однако этот режим не сжимает бандл и не минимизирует код.

Преимущества режима разработки

Работает быстрее production-режима. Это связано с тем, что режиму разработки не нужно создавать оптимизированный бандл, сжимать код, изображения и шрифты. Но и сам файл при этом может достигать колоссальных размеров, из-за чего при деплое на хостинг страница будет долго загружаться.

Показывает подробные сообщения об ошибках и иногда способы их решения. При этом указывает, в каком файле, строке и функции произошёл сбой. Особенно хорошо раскрывается при написании кода на TypeScript c использованием ESLint. При желании ошибки можно убрать, однако мы не советуем так делать.

При запущенном webpack-dev-server мы всегда работаем в development-режиме. Наш код не минимизирован и пересобирается каждый раз, когда мы вносим изменения. Всё происходит в оперативной памяти компьютера, и пытаться как это изменить крайне не рекомендуется во избежание критических ошибок. Саму ОС это не затронет, но и пытаться не стоит.

Что происходит после сборки

При вводе команды npm run dev (именно dev — от development) по истечении 2–3 секунд мы получаем следующее:

Код автоматически преобразован webpack-ом, но не оптимизирован. В нём находятся комментарии с предупреждением о том, что мы используем development-режим и для оптимизации стоит использовать production.

Ниже представлен скриншот вывода информации в консоль после сборки. Обратите внимание: сборщик не показывает предупреждений о том, что можно оптимизировать, или о том, что превышен допустимый размер шрифтов.

В следующей статье мы разберём особенности работы production-режима.