Comment répliquer le remplacement de variables dépendant de l'environnement dans Webpack pour les applications angulaires ?

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

Lors de la migration d'une application angulaire de gulp vers webpack, vous pouvez rencontrer comment répliquer les fonctionnalités de remplacement des variables dans les fichiers HTML en fonction du NODE_ENV. Cet article propose plusieurs approches pour y parvenir dans webpack.

DefinePlugin

Le DefinePlugin vous permet de remplacer des chaînes spécifiques "telles quelles" par des variables d'environnement.

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

EnvironmentPlugin

Semblable à DefinePlugin, EnvironmentPlugin l'utilise en interne pour mapper les valeurs d'environnement au code.

new webpack.EnvironmentPlugin(['NODE_ENV'])

Alias

Une autre option consiste à consommer la configuration via un module alias. Dans le code consommateur :

var config = require('config');

La configuration peut être définie comme suit :

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

En fonction du NODE_ENV (par exemple, "développement"), le fichier de configuration sera chargé. La configuration exportée à partir de ce fichier peut contenir des variables dépendantes de l'environnement.

En utilisant ces approches, vous pouvez gérer efficacement les variables dépendantes de l'environnement dans vos fichiers HTML pendant le processus de création du webpack, de la même manière que vous le feriez avec gulp et gulp-prétraitement.

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!