Passing environment-dependent variables in webpack

Question

I\'m trying to convert an angular app from gulp to webpack. in gulp I use gulp-preprocess to replace some variables in the html page (e.g. database name) depending on the NO

Answer 1

I found the following solution to be easiest to setup environment variable for Webpack 2:

For example we have a webpack settings:

var webpack = require('webpack')

let webpackConfig = (env) => { // Passing envirmonment through
                                // function is important here
    return {
        entry: {
        // entries
        },

        output: {
        // outputs
        },

        plugins: [
        // plugins
        ],

        module: {
        // modules
        },

        resolve: {
        // resolves
        }

    }
};

module.exports = webpackConfig;

Add Environment Variable in Webpack:

plugins: [
    new webpack.EnvironmentPlugin({
       NODE_ENV: 'development',
       }),
]

Define Plugin Variable and add it to plugins:

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

Now when running webpack command, pass env.NODE_ENV as argument:

webpack --env.NODE_ENV=development

// OR

webpack --env.NODE_ENV development

Now you can access NODE_ENV variable anywhere in your code.