Wie übergebe ich umgebungsabhängige Variablen im Webpack für Angular Apps?

Übergabe umgebungsabhängiger Variablen in Webpack

In Angular-Apps von Gulp nach Webpack konvertiert, Replikation der Funktionalität von Gulp-Preprocess mithilfe von Webpack für Das dynamische Ersetzen von Variablen (z. B. Datenbanknamen) basierend auf NODE_ENV erfordert einen anderen Ansatz.

Es gibt mehrere Möglichkeiten, dies zu erreichen:

DefinePlugin

Verwenden Sie das webpack.DefinePlugin, um Umgebungsvariablen als JSON-Strings direkt in den Code einzufügen.

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

Beachten Sie, dass diese Technik übereinstimmende Strings „wie sie sind“ ersetzt, was das spezifische JSON-Format erfordert. Komplexe Strukturen wie Objekte sind möglich, aber das Prinzip bleibt dasselbe.

EnvironmentPlugin

Nutzen Sie das webpack.EnvironmentPlugin, das intern DefinePlugin nutzt. Es ordnet Umgebungswerte dem Code zu und vereinfacht so die Syntax.

new webpack.EnvironmentPlugin(['NODE_ENV'])

Alias

Verwenden Sie die Konfiguration über ein Alias-Modul:

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

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

Basierend Auf der NODE_ENV wird dieses Beispiel einem Modul wie ./config/development.js zugeordnet, das die gewünschte Konfiguration exportiert.

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