Comment transmettre des variables dépendantes de l'environnement dans Webpack ?

Passer des variables dépendantes de l'environnement dans Webpack

Lors de la migration d'une application angulaire de Gulp vers Webpack, une tâche courante consiste à gérer les variables dépendantes de l'environnement. Voici trois façons efficaces d'y parvenir en utilisant Webpack :

1. DefinePlugin

Cette méthode remplace directement les variables dans la page HTML à l'aide du DefinePlugin :

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

Notez que le format de chaîne préserve la valeur d'environnement de la variable.

2. EnvironmentPlugin

EnvironmentPlugin simplifie le processus DefinePlugin en mappant les valeurs d'environnement au code en interne :

new webpack.EnvironmentPlugin(['NODE_ENV'])

3. Alias

Pour des besoins de configuration complexes, vous pouvez utiliser un module avec alias :

Côté consommateur :

var config = require('config');

Module de configuration :

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

Cela vous permet d'exporter la configuration d'un module spécifié en fonction de l'environnement variable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!