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

Passing Environment-Dependent Variables in Webpack

Converting an Angular app from Gulp to Webpack presents the challenge of replacing HTML page variables based on NODE_ENV. Here are several effective methods to achieve this with Webpack:

1. DefinePlugin

This plugin allows for the replacement of matched variables with the provided string:

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

2. EnvironmentPlugin

Utilizing DefinePlugin internally, this plugin maps environment values to code:

new webpack.EnvironmentPlugin(['NODE_ENV'])

3. Alias

By creating an aliased module, you can access configuration through consumer modules:

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

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

Depending on the NODE_ENV, this will map to a module that exports configuration, enabling you to access environment-dependent variables in your application.

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