How use env in webpack? - reactjs

Question

I created .env and .env.production files with differnt values:
API=http://localhost:8082/api/
Created config:
var config = {};
config.api = process.env.API;
module.exports = config;
I try to get config in an action but 'api' field is undefined.
const config = require("../config/server");
console.log(config);
I think need to add something in the start command
"start": "webpack-dev-server --mode development --inline --progress",
"production": "webpack-dev-server --mode production --inline --progress",
But I'm not sure what I should add here.
Could you please help me?

Answer 1

Create a webpack.config.js in project root directory and add entries in it as suggested below
webpack.config.js
// Do the imports at top of config file
var webpack = require('webpack');
var dotenv = require('dotenv').config({path: __dirname + '/.env'});
....
// In plugins section
plugins: [
...
new webpack.DefinePlugin({ "process.env": dotenv.parsed })
]
Don't forget to install dotenv package. (yarn add dotenv / npm install --save dotenv).
Then change start script as below
"start": "webpack"
To get more insights on webpack.config.js options, check here.
(or)
Edit
If you have only fewer environment variables and don't want to maintain them in a separate file (.env/.env.production) and load it via webpack DefinePlugin, libraries like cross-env will come handy here.
Change your scripts as below
"start": "cross-env API=http://localhost:8082/api webpack-dev-server --mode development --inline --progress",
"production": "cross-env API=https://prodsite.com/api webpack-dev-server --mode production --inline --progress",
You can add multiple variables too
"start": "cross-env NODE_ENV=... API=... webpack-dev-server ..."

Answer 2

I use the dotenv package along with the define plugin.
We first parse the .env file then iterate over the values assembling an object. Afterwards we pass the assembled object to the define plugin. The define plugin sets them as global constants accessible from your application.
const dotenv = require('dotenv');
const fileEnv = dotenv.config({ path: '.env.development' }).parsed;
const envKeys = Object.keys(fileEnv).reduce((prev, next) => {
prev[`process.env.${next}`] = JSON.stringify(fileEnv[next]);
return prev;
}, {});
module.exports = {
...
plugins: [
new webpack.DefinePlugin(envKeys),
],
...
}