Wie übergebe ich umgebungsabhängige Variablen in Ihrer Angular-Anwendung mithilfe von Webpack?

Übergabe umgebungsabhängiger Variablen im Webpack

Problem:

Beim Konvertieren einer Angular-Anwendung von Gulp in Webpack müssen Sie einen Weg zum Ersetzen finden umgebungsabhängige Variablen (z. B. der Datenbankname) im HTML Seite.

Lösung:

Es gibt mehrere Methoden, dies mit Webpack zu erreichen:

DefinePlugin

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

DefinePlugin ersetzt exakte Übereinstimmungen „wie sie sind, " daher die JSON-Formatierung string.

EnvironmentPlugin

new webpack.EnvironmentPlugin(['NODE_ENV'])

EnvironmentPlugin verwendet DefinePlugin intern, um Umgebungswerte über die Terser-Syntax zuzuordnen.

Alias

Erstellen Sie ein Alias-Modul zum Konsumieren Konfiguration:

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

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

Wenn beispielsweise process.env.NODE_ENV „Entwicklung“ ist, befindet sich das Alias-Modul unter ./config/development.js:

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

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