如何在 Angular 應用程式的 Webpack 中複製環境相關變數替換？

在Webpack 中傳遞環境相關變數

將Angular 應用程式從gulp 遷移到webpack 時，您可能會遇到如何複製根據NODE_ENV 取代HTML 檔案中的變數。本文提供了在 webpack 中實現此目的的幾種方法。

DefinePlugin

DefinePlugin 讓您可以用環境「原樣」取代特定字串

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

>與DefinePlugin類似，EnvironmentPlugin 內部使用它來將環境值對應到code.

new webpack.EnvironmentPlugin(['NODE_ENV'])

別名

另一個選項是透過別名模組使用設定。在消費者代碼中：

設定可以定義如下：

var config = require('config');

基於NODE_ENV（例如「development」），將載入設定檔。從該文件匯出的配置可以包含與環境相關的變數。

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

透過利用這些方法，您可以在 webpack 建置過程中有效地管理 HTML 檔案中的與環境相關的變量，類似於使用 gulp 和gulp-預處理。

以上是如何在 Angular 應用程式的 Webpack 中複製環境相關變數替換？的詳細內容。更多資訊請關注PHP中文網其他相關文章！