如何在 Angular 應用程式的 Webpack 中傳遞環境相關變數？

在Webpack 中傳遞環境相關變數

在從Gulp 轉換為Webpack 的Angular 應用程式中，使用web-Ppackprocess 的功能根據NODE_ENV動態替換變數（例如資料庫名稱）需要不同的

有幾個選項可以實現此目的：

DefinePlugin

使用webpack. DefinePlugin 將環境變數直接注入JSON 字串到程式碼。

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

請注意，此技術「原樣」替換匹配字串，需要特定的 JSON 格式。複雜的結構（如物件）是可能的，但原理保持不變。

EnvironmentPlugin

利用 webpack.EnvironmentPlugin，它內部使用 DefinePlugin。它將環境值映射到程式碼，簡化了語法。

new webpack.EnvironmentPlugin(['NODE_ENV'])

別名

透過別名模組使用設定：

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

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

基於在NODE_ENV 上，此範例對應到./config/ development.js 等模組，此模組導出所需的配置。

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