Passing Environment-Dependent Variables in Webpack

Passing environment-dependent variables in webpack

There are two basic ways to achieve this.

DefinePlugin

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),

Note that this will just replace the matches "as is". That's why the string is in the format it is. You could have a more complex structure, such as an object there but you get the idea.

EnvironmentPlugin

new webpack.EnvironmentPlugin(['NODE_ENV'])

EnvironmentPlugin uses DefinePlugin internally and maps the environment values to code through it. Terser syntax.

Alias

Alternatively you could consume configuration through an aliased module. From consumer side it would look like this:

var config = require('config');

Configuration itself could look like this:

resolve: {
    alias: {
        config: path.join(__dirname, 'config', process.env.NODE_ENV)
    }
}

Let's say process.env.NODE_ENV is development. It would map into ./config/development.js then. The module it maps to can export configuration like this:

module.exports = {
    testing: 'something',
    ...
};

How to pass .env file variables to webpack config?

You can use dotenv package for this purpose.

After installing the package, add this in the top of your config:

const webpack = require('webpack'); // only add this if you don't have yet

// replace accordingly './.env' with the path of your .env file 
require('dotenv').config({ path: './.env' }); 

then in plugins section, add this:

new webpack.DefinePlugin({
  "process.env": JSON.stringify(process.env);
}),

Passing environment envariables inside webpack configuration

Regarding your last edit: you're trying to access process.env but have defined no ENV variable name (like .BACKEND); is it simply a typo or is that the source of the issue here? : )
Because this definitely works:

plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            BACKEND: JSON.stringify(process.env.BACKEND),

Edit:

What helped in the end was a variable value not wrapped in double quotes:

NAME: 'Our site'

// should have been:
NAME: '"Our site"'

dotenv-webpack use environment variable in webpack.config.js

If you want to use variables from your .env file in the webpack.config.js directly, understand that it behaves just as any other javascript file while being run, so you need to use the dotenv package directly in the config file, not the dotenv-webpack plugin, which inserts the variables into your bundled code.

I.e, just npm install dotenv and add require('dotenv').config() to the top of your webpack.config file.

How to use environment variables that were defined in Webpack?

It looks like that there is not javascript compile error, but only ESLint reported error. Probably you have set up your build process such way, that some eslint error stops your build process.

I can confirm that using variables defined with DefinePlugin in the app is reported by ESLint as an no-undef error.

Try to disble this ESLint rule, put /* eslint-disable no-undef */ on the first line of your ./src/components/Login/login.js.

Or you can add your defined variables to globals section in your eslint config file, see this answer:
ESLint no-undef and webpack plugin

---

Related Topics