How to Pass Environment-Dependent Variables in Webpack for Angular Apps?

Passing Environment-Dependent Variables in Webpack

In Angular apps converted from Gulp to Webpack, replicating the functionality of Gulp-Preprocess using webpack for dynamically replacing variables (such as database names) based on the NODE_ENV requires a different approach.

There are several options for achieving this:

DefinePlugin

Use the webpack.DefinePlugin to inject environment variables as JSON strings directly into the code.

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

Note that this technique replaces matching strings "as is," necessitating the specific JSON format. Complex structures, like objects, are possible, but the principle remains the same.

EnvironmentPlugin

Leverage the webpack.EnvironmentPlugin, which internally utilizes DefinePlugin. It maps environment values to code, simplifying the syntax.

new webpack.EnvironmentPlugin(['NODE_ENV'])

Alias

Consume configuration through an aliased module:

// Consumer side
var config = require('config');

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

Based on the NODE_ENV, this example maps to a module like ./config/development.js, which exports the desired configuration.

The above is the detailed content of How to Pass Environment-Dependent Variables in Webpack for Angular Apps?. For more information, please follow other related articles on the PHP Chinese website!