Переход с gulp на webpack: работа с переменными по NODE_ENV

Быстрый ответ

Для того чтобы передать переменные окружения в Webpack, следует воспользоваться DefinePlugin:

const webpack = require('webpack');
const envVars = { NODE_ENV: JSON.stringify(process.env.NODE_ENV) };

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': envVars
    })
  ]
};

Значение NODE_ENV через конфигурацию Webpack непосредственно устанавливается в process.env. Обычно понадобиться разграничить разрабатываемый проект от его релизной версии. Следует использовать JSON.stringify, потому что DefinePlugin только так работает. В итоге переменные окружения станут доступны в коде следующим образом: process.env.NODE_ENV.

Особенности: Работа с множественными окружениями

Зачастую окружений больше, чем только разработка и продакшн. Они могут включать тестовые среды, интеграционные серверы или разные специальные конфигурации. Все эти задачи успешно решает DefinePlugin.

Специфические конфигурации для разных окружений

Можно легко настроить конфигурации для разных окружений:

const envConfig = require(`./config/${process.env.NODE_ENV}.config`);

new webpack.DefinePlugin(envConfig);

Таким образом может выглядеть ваш package.json:

"scripts": {
  "build:dev": "webpack --env development",
  "build:prod": "webpack --env production"
}

Подробнее об этом расскажет наш спикер на видео

Работаем с сложными переменными окружения

Если вам необходимо работать со сложными переменными окружения, DefinePlugin с этим справится:

new webpack.DefinePlugin({
  'config': {
    'endpoint': JSON.stringify(process.env.API_ENDPOINT),
    'featureFlags': JSON.stringify(process.env.FEATURE_FLAGS)
  }
});

Интеграция с HTML

Для того чтобы передать переменные в HTML, используйте html-webpack-plugin:

new HtmlWebpackPlugin({
  templateParameters: {
    'API_URL': JSON.stringify(process.env.API_URL)
  }
})

Визуализация

Предложим следующую аналогию: ваш код – это корабль (🚢), который отправляется в разные моря:

Считайте Webpack капитаном, который командует кораблём по вашим инструкциям:

🚢 + 💼 ⇒ Остров разработки (Написание кода и быстрые тесты)
🚢 + 📦 ⇒ Стейджинг-бухта (Подготовка к выпуску версии)
🚢 + 🗝️ ⇒ Продакшн-рай (Релиз готового продукта)

Продвиньтесь с resolve.alias

Если вы перешли на Webpack из gulp, тогда вам стоит познакомиться с resolve.alias – идеальной функцией для создания синонимов и удобного управления модулями:

resolve: {
  alias: {
    Config$: path.resolve(__dirname, 'path/to/environment/config')
  }
}

Алиас Config в коде будет ссылаться на соответствующий конфигурационный файл окружения.

Учёт глобальных констант в линтерах

Линтеры могут выдавать предупреждения по поводу глобальных констант, добавляемых через Webpack. Укажите им о них, обновив конфигурацию ESlint таким образом:

"globals": {
  "API_URL": true
}

Передача флагов окружения

Флаги окружения можно передавать через командную строку, используя --env в webpack:

webpack --env.TEST=true --config webpack.config.js

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

Полезные материалы

1. Переменные окружения | webpack – подробное руководство по использованию переменных окружения в Webpack.
2. DefinePlugin | webpack – информация о плагине DefinePlugin.
3. dotenv – npm – управление переменными окружения в Node.js.
4. Составление конфигураций – как собирать конфигурации webpack.
5. cross-env – npm – настройка переменных окружения для разных платформ.
6. webpack-merge – npm – элегантное объединение конфигураций webpack.
7. Как хранить настройки развертывания Node.js? – варианты управления конфигурационными файлами от профессионалов.