How use env in webpack?

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?

Does this answer your question? [How to pass .env file variables to webpack config?](https://stackoverflow.com/questions/46224986/how-to-pass-env-file-variables-to-webpack-config) — Prathap Reddy, Jul 24 '20 at 17:43
@PrathapReddy maybe, but I still not understand how implement DefinePlugin — Mediator, Jul 24 '20 at 18:01

score 1 · Answer 1 · edited Jul 24 '20 at 18:20

1

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),
    ],
...
}

edited Jul 24 '20 at 18:20

Dharman

30,962
25
85
135

answered Jul 24 '20 at 18:14

MaxGDN

1,251
1
7
14

But how setup production config in this example? – Mediator Jul 24 '20 at 18:25
Just change the .env.development to whatever .env file you'd like to serve. In your case it would be .env.production. I run two configuration files, webpack.prod.js and webpack.dev.js. Each of them have a respective .env file. If you want to reuse code there is the webpack merge plugin. – MaxGDN Jul 24 '20 at 18:30
Not really want to have two webpack configs. too many duplicates – Mediator Jul 24 '20 at 18:32
It is work, but need to config '.env.development' row – Mediator Jul 24 '20 at 18:47
No need to maintain two `webpack` files. Only keep your `.env` (add it to `.gitignore`) file in local with a single `webpack.config.js` file. For production, set `API` environment variable in your production machine. – Prathap Reddy Jul 24 '20 at 18:49
Not really think it is what I need. I want to setup an environment in start command "start": "webpack-dev-server --NODE_ENV=development --mode development --inline --progress", But can't find NODE_ENV in process.env – Mediator Jul 24 '20 at 19:01
Please check out the **Edit** section in my answer. May be that's what you are expecting. – Prathap Reddy Jul 25 '20 at 04:08

Prathap Reddy · Accepted Answer · 2020-07-25T04:16:24.257

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 ..."

edited Jul 25 '20 at 04:16

answered Jul 24 '20 at 18:35

Prathap Reddy

1,688
2
6
18

It same answer as bellow. I still can't find a way to setup environment. I want setup config in the start command: "start": "webpack-dev-server --NODE_ENV=development --mode development --inline --progress" and read in webconfig NODE_ENV variable – Mediator Jul 24 '20 at 19:03
Updated my answer (**Edit**). Hope it helps – Prathap Reddy Jul 25 '20 at 04:09
@Mediator, If you found any **simpler solution** than the answers posted here, requesting you to post `your answer` so that it would help me and others in similar use case. – Prathap Reddy Jul 28 '20 at 08:01
1

I'm not sure is it a simpler solution or not. I use one main webpack config and merge with prod and dev webpack config. "webpack-dev-server --config webpack.prod.js --mode production" I still working on it, so I don't wan't choose answer as solution – Mediator Jul 28 '20 at 08:30
I didn't use cross-env, but looks good answer, but I need more time to figure out what is best for me – Mediator Jul 28 '20 at 08:31
Actually we do use different webpack config files like `webpack.dev.js` and `webpack.prod.js` and merge them with `webpack.common.js` file in all our projects. For more customisation, this is ideal I believe. – Prathap Reddy Jul 28 '20 at 08:34

How use env in webpack?

2 Answers2

(or)

Edit