Wie übergebe ich umgebungsabhängige Variablen in Webpack?

Übergabe umgebungsabhängiger Variablen in Webpack

Bei der Migration einer Angular-App von Gulp zu Webpack besteht eine häufige Aufgabe darin, umgebungsabhängige Variablen zu verwalten. Hier sind drei effektive Möglichkeiten, dies mit Webpack zu erreichen:

1. DefinePlugin

Diese Methode ersetzt Variablen in der HTML-Seite direkt mithilfe des DefinePlugin:

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

Beachten Sie, dass das Zeichenfolgenformat den Umgebungswert der Variablen beibehält.

2. EnvironmentPlugin

EnvironmentPlugin vereinfacht den DefinePlugin-Prozess, indem es Umgebungswerte intern dem Code zuordnet:

new webpack.EnvironmentPlugin(['NODE_ENV'])

3. Alias

Für komplexe Konfigurationsanforderungen können Sie ein Alias-Modul verwenden:

Verbraucherseite:

var config = require('config');

Konfigurationsmodul:

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

Damit können Sie die Konfiguration aus einem bestimmten Modul basierend auf der Umgebungsvariablen exportieren.

Das obige ist der detaillierte Inhalt vonWie übergebe ich umgebungsabhängige Variablen in Webpack?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!