webpack DefinePlugin Использование env переменных из файла в javascript. Пример конфигурации

DefinePlugin позволяет определить какие литералы на что надо заменить в коде при его сборке, именно там с помощью вебпака можно экспортировать переменные из файлов окружения в ваше-фронт приложение

Базования идея (требуется установить npm-пакет dotenv):

const webpack = require('webpack');
const dotenv = require('dotenv');

module.exports = () => {
  // разбираем .env файл
  const env = dotenv.config().parsed;
  
  // собираем объект замен
  const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
  }, {});

  return {
    plugins: [
      new webpack.DefinePlugin(envKeys)
    ]
  };

На практике можно использовать слияние локального и глобального кофигов (с проверкой существования локального, который можно поместить в gitignore и не хранить в репозитории):

const webpack = require('webpack');
const dotenv = require('dotenv');
const fs = require('fs')

module.exports = () => {


// ------- load env
const frontEnvPath = './.env.front';
const frontEnvLocalPath = './.env.front.local';

var env = dotenv.config({path: frontEnvPath}).parsed;
try {
	if (fs.existsSync(frontEnvLocalPath)) {
		let envLocal = dotenv.config({path: frontEnvLocalPath}).parsed;
		env = {...env, ...envLocal} // объединяем конфигурации
	}
} catch (err) {
	console.error(frontEnvLocalPath + ' file:', err);
}
//--------------------
  
  // собираем объект замен
  const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev;
  }, {});

  return {
    plugins: [
      new webpack.DefinePlugin(envKeys)
    ]
  };

Источники:

1. Идея взята из примера: https://medium.com/@trekinbami/using-env...
2. DefinePlugin: https://webpack.js.org/plugins/define-pl...