How to Pass Environment-Dependent Variables in Webpack?

Passing Environment-Dependent Variables in Webpack

When migrating an Angular app from Gulp to Webpack, a common task is managing environment-dependent variables. Here are three effective ways to achieve this using Webpack:

1. DefinePlugin

This method directly replaces variables in the HTML page using the DefinePlugin:

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

Note that the string format preserves the variable's environment value.

2. EnvironmentPlugin

EnvironmentPlugin simplifies the DefinePlugin process by mapping environment values to code internally:

new webpack.EnvironmentPlugin(['NODE_ENV'])

3. Alias

For complex configuration needs, you can use an aliased module:

Consumer Side:

var config = require('config');

Configuration Module:

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

This allows you to export configuration from a specified module based on the environment variable.

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