Ответ 1

Для этой цели вы можете использовать пакет dotenv

Ссылка: https://www.npmjs.com/package/dotenv https://github.com/motdotla/dotenv

В верхней части файла конфигурации веб-пакета требуется dotenv следующим образом (установите путь к .env правильно)

var dotenv = require('dotenv').config({path: __dirname + '/.env'});

в разделе плагинов для конфигурации веб-пакетов используйте

new webpack.DefinePlugin({
            "process.env": dotenv.parsed
        }),

Теперь вы можете использовать переменные env во всем приложении. попробуйте console.log(process.env); в вашем коде приложения

Ответ 2

Это не совсем соответствует вашему случаю (хотя и частично), но я нашел, что эта формула работает лучше всего для меня.

Я использую комбинацию из 2 libs: dotenv для чтения файла .env для webpack.config.js (конфигурация) и webpack-dotenv-plugin для проверки (на .env.example файла .env.example) и для передачи всех переменные из файла .env в код приложения:

Часть моего webpack.config.js:

// this is to load env vars for this config
require('dotenv').config({ // it puts the content to the "process.env" var. System vars are taking precedence
    path: '.env.webpack',
});
// and this to pass env vars to the JS application
const DotenvPlugin = require('webpack-dotenv-plugin');

Раздел плагинов:

plugins: [
    // ...
    new DotenvPlugin({ // makes vars available to the application js code
        path: '.env.webpack',
        sample: '.env.webpack.example',
        allowEmptyValues: true,
    }),
    // ...
]

Ответ 3

Я не могу комментировать, чтобы прояснить любую информацию, поэтому приношу свои извинения за ответ.

Вы можете сделать:

var env = require('.env');

то

new webpack.DefinePlugin({
            "API_URL": JSON.stringify("http://my-api.com"),
            "SECRET_KEY" : "MYSECRETKEYGOESHERE",
            "env_property": env.property
        }),

Но я делаю предположения относительно вашего .env файла и способа его настройки с помощью этого ответа

Ответ 4

вебпак + дотенв

Я получил вдохновение от принятого ответа, но он не работает для меня. Возможно API дотенв изменился.

Следующие работы у меня

import dotenv from 'dotenv'
import { DefinePlugin } from 'webpack'


...

plugins: [
    new DefinePlugin({
      'process.env': JSON.stringify(dotenv.config().parsed)
    })
]

...

Ответ 5

Самое простое решение, которое я нашел, это использовать этот пакет npm: dotenv-webpack

Создать файл .env

// .env
DB_HOST=127.0.0.1
DB_PASS=foobar
S3_API=mysecretkey

Добавьте его в свой конфигурационный файл Webpack

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
...
plugins: [
new Dotenv()
]
...
};

Используйте в своем коде

// file1.js
console.log(process.env.DB_HOST);
// '127.0.0.1'
Resulting bundle
// bundle.js
console.log('127.0.0.1');

Ответ 6

Из webpack docs:

Параметр среды командной строки webpack --env позволяет вам пройти в как много переменных среды, как вам нравится. Переменные среды будут доступны в вашем webpack.config.js. Например, --env.production или --env.NODE_ENV = local (NODE_ENV обычно используется для определения типа среды, см. здесь.)

в package.json

webpack --env.NODE_ENV=local --env.production --progress

в webpack.config.js

module.exports = env => {
  // Use env.<YOUR VARIABLE> here:
  console.log('NODE_ENV: ', env.NODE_ENV) // 'local'
  console.log('Production: ', env.production) // true

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }