Comment transmettre des variables dépendantes de l'environnement dans votre application angulaire à l'aide de Webpack ?

Passer des variables dépendantes de l'environnement dans le webpack

Problème :

Conversion d'une application angulaire de gulp en webpack, vous devez trouver un moyen de remplacer variables dépendantes de l'environnement (telles que le nom de la base de données) dans le HTML page.

Solution :

Il existe plusieurs méthodes pour y parvenir à l'aide de webpack :

DefinePlugin

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

DefinePlugin remplace les correspondances exactes "en l'état, " d'où le format JSON string.

EnvironmentPlugin

new webpack.EnvironmentPlugin(['NODE_ENV'])

EnvironmentPlugin utilise DefinePlugin en interne pour mapper les valeurs d'environnement via la syntaxe Terser.

Alias

Créez un module avec alias à consommer configuration :

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

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

Par exemple, si process.env.NODE_ENV est « développement », le module alias se trouvera dans ./config/development.js :

// Configuration module for 'development' environment
module.exports = {
    testing: 'something',
    ...
};

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!