Webpack переменная окружения NODE_ENV, устанавливаем пакет cross-env (кросс-платформенный)

Для тех кто работает с webpack возможно придется встретится с переменными окружения NODE ENV (NODE_ENV) про которые опишу ниже.

Переменные окружения это специальные переменные, которые определяются самой операционной системой. Есть переменные окружения к примеру в windows которые под самой известной PATH.

То есть:

Переменная среды — текстовая короткая ссылка на элемент операционной системы Windows или на других ОС, предназначенная для получения быстрого доступа к объекту системы, или к данным о каталогах и конфигурации компьютера.

Переменная среды (переменная окружения) позволяет быстро перейти к нужному месту на компьютере, без использования имени пользователя или полного пути к объекту.

1. Локальные переменные окружения

Такие переменные существуют только для текущей сессии. После завершения сессии они будут удалены. Локальные переменные не хранятся ни в каких файлах, а создаются и удаляются с помощью команд в терминале.

2. Пользовательские переменные окружения

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

3. Системные переменные окружения

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

Теперь нам нужно задать переменную окружения NODE_ENV. Проблема в том, что в различных операционных системах переменные окружения задаются по разному. В Windows переменные окружения задаются командой SET, в Linux используется команда export, а в Mac OS команда env. Эту проблему поможет решить пакет cross-env. Он поможет определить временную переменную окружения в одном виде для всех ОС. Для этого установим пакет cross-env из npm. В файле package.json определим следующие скрипты для npm.

Когда начинаем что то компилировать на webpack то нам для отправки каких либо значений в переменой в конфигурационный файл webpack.config.js понадобится NODE_ENV в которую будем писать значение «production». В webpack.config.js будем устанавливать проверку на значение «production» для компилирования проекта в продакшен версию.

У Node.js есть доступ к переменным окружения. Мы можем обратиться к глобальному объекту process и посмотреть на свойство env. Выполним команду node в консоли. Затем команду console.log(process.env). видим, что свойство хранит все переменные окружения, которые использует приложение Node.js. Свойство env объекта process и поможет нам повлиять на сборку webpack.

1. Выполним команду для установки cross-env

npm install cross-env

2. Далее в файле package.json в scripts укажем готовую команду для сборки webpack в production version

"scripts": {
    "prod": "cross-env NODE_ENV=production webpack --progress --colors --debug --display-chunks"
}

Где через cross-env задаем переменную и значение NODE_ENV=production и далее эту переменную получим в процессе выполнения webpack

3. Далее в конфигурационный файл webpack.config.js применим вот так проверку из объекта process и далее свойства env на нашу переменную NODE_ENV: