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

在webpack 中傳遞環境相關變數

問題：

將Angular 應用程式從gulp 轉換為webpack，需要找到一種方法來替換HTML 頁面中與環境相關的變數（例如資料庫名稱）。

解決方案：

使用webpack 有多種方法可以實現此目的：

DefinePlugin

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

DefinePlugin “按原樣”替換，因此是JSON 格式的字串。

EnvironmentPlugin

new webpack.EnvironmentPlugin(['NODE_ENV'])

EnvironmentPlugin 在內部使用 DefinePlugin 透過 Terser 語法來對應環境值。

別名

建立別名模組來使用設定：

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

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

例如，如果process.env.NODE_ENV 為“development”，則別名模組將位於./config/development.js:

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

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