Wie repliziere ich die umgebungsabhängige Variablenersetzung in Webpack für Angular-Anwendungen?

Übergabe umgebungsabhängiger Variablen in Webpack

Bei der Migration einer Angular-Anwendung von gulp zu Webpack erfahren Sie möglicherweise, wie Sie die Funktionalität von replizieren können Ersetzen von Variablen in HTML-Dateien abhängig von NODE_ENV. Dieser Artikel bietet mehrere Ansätze, um dies im Webpack zu erreichen.

DefinePlugin

Mit dem DefinePlugin können Sie bestimmte Zeichenfolgen „wie sie sind“ durch Umgebungsvariablen ersetzen.

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

EnvironmentPlugin

Ähnlich Um Plugin zu definieren, verwendet EnvironmentPlugin es intern, um Umgebungswerte dem Code zuzuordnen.

new webpack.EnvironmentPlugin(['NODE_ENV'])

Alias

Eine weitere Option besteht darin, die Konfiguration über ein Alias-Modul zu nutzen. Im Consumer-Code:

var config = require('config');

Die Konfiguration kann wie folgt definiert werden:

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

Basierend auf dem NODE_ENV (z. B. „Entwicklung“) wird die Konfigurationsdatei geladen. Die exportierte Konfiguration aus dieser Datei kann umgebungsabhängige Variablen enthalten.

Durch die Verwendung dieser Ansätze können Sie umgebungsabhängige Variablen in Ihren HTML-Dateien während des Webpack-Erstellungsprozesses effektiv verwalten, ähnlich wie Sie es mit gulp und tun würden gulp-preprocess.

Das obige ist der detaillierte Inhalt vonWie repliziere ich die umgebungsabhängige Variablenersetzung in Webpack für Angular-Anwendungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!