Using webpack to pass environment-dependent variables

Problem

I’m trying to convert a gulp-based angular app to webpack. I use gulp-preprocess in gulp to replace various variables in the html page (for example, database name) based on the NODE ENV. What’s the most efficient approach to get a comparable outcome with webpack?

Asked by kpg

Solution #1

There are two fundamental methods for accomplishing this.

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

It’s important to note that this will simply replace the matches “as is.” That is why the string is formatted as it is. You could make it more complicated by adding an item, but you get the idea.

new webpack.EnvironmentPlugin(['NODE_ENV'])

Internally, EnvironmentPlugin makes use of DefinePlugin to map environment values to code. The syntax is more terser.

You might also use an aliased module to consume settings. From the perspective of the consumer, it would appear like this:

var config = require('config');

This is how the configuration might look:

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

Let’s use the example of process.env. NODE ENV is a development environment. It would then be mapped to./config/development.js. Its mapping module can export configuration in the following format:

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

Answered by Juho Vepsäläinen

Solution #2

Another alternative is to use the define option of webpack if you simply want to use a cli interface. In my bundle, I include the following script. json is a type of data.

"build-production": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors"

So all I have to do now is do npm run build-production.

Answered by zer0chain

Solution #3

I looked at a few options for setting environment-specific variables and came up with the following:

Currently, I have two webpack configurations:

webpack.production.config.js

new webpack.DefinePlugin({
  'process.env':{
    'NODE_ENV': JSON.stringify('production'),
    'API_URL': JSON.stringify('http://localhost:8080/bands')
  }
}),

webpack.config.js

new webpack.DefinePlugin({
  'process.env':{
    'NODE_ENV': JSON.stringify('development'),
    'API_URL': JSON.stringify('http://10.10.10.10:8080/bands')
  }
}),

This is how I got the value of API URL in my code:

process.env.API URL; const apiUrl = process.env.API URL;

EDITED ON THE 3RD OF NOVEMBER, 2016

An example can be found in the Webpack documentation: https://webpack.js.org/plugins/define-plugin/#usage

new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true),
    VERSION: JSON.stringify("5fa3b9"),
    BROWSER_SUPPORTS_HTML5: true,
    TWO: "1+1",
    "typeof window": JSON.stringify("object")
})

If you have the no-undef rule enabled in ESLint, you must explicitly allow undefined variables in code. like this: http://eslint.org/docs/rules/no-undef

/*global TWO*/
console.log('Running App version ' + TWO);

EDIT 7th of Sep, 2017 (Create-React-App specific)

Create-React-App: Create-React-App: Create-React-App: Create-React-App: Create-React-App: Create-React-App: Create-React- Adding Custom Environment Variables to a Create-React-App CRA, on the other hand, uses Webpack internally.

Answered by Capuchin

Solution #4

You can pass any command-line argument without additional plugins using –env since webpack 2:

webpack --config webpack.config.js --env.foo=bar

In webpack.config.js, use the variable:

module.exports = function(env) {
    if (env.foo === 'bar') {
        // do something
    }
}

Source

Answered by andruso

Solution #5

During the transpilation, you can directly use the EnvironmentPlugin provided in webpack to gain access to any environment variable.

Simply include the following code in your webpack.config.js file to declare the plugin:

var webpack = require('webpack');

module.exports = {
    /* ... */
    plugins = [
        new webpack.EnvironmentPlugin(['NODE_ENV'])
    ]
};

It’s worth noting that the names of the environment variables you intend to use must be declared clearly.

Answered by Kuhess

Post is based on https://stackoverflow.com/questions/30030031/passing-environment-dependent-variables-in-webpack