Angular アプリケーションの Webpack で環境依存の変数置換をレプリケートする方法は?

Webpack で環境に依存する変数を渡す

Angular アプリケーションを gulp から webpack に移行するとき、次の機能を複製する方法が見つかる可能性があります。 NODE_ENV に応じて HTML ファイル内の変数を置き換えます。この記事では、Webpack でこれを実現するためのいくつかのアプローチを説明します。

DefinePlugin

DefinePlugin を使用すると、特定の文字列を「そのまま」環境に置き換えることができます。 variables.

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

EnvironmentPlugin

DefinePlugin と同様に、EnvironmentPlugin は環境値をマッピングするために内部的に使用します。 code.

new webpack.EnvironmentPlugin(['NODE_ENV'])

Alias

もう 1 つのオプションは、エイリアス化されたモジュールを通じて構成を使用することです。コンシューマ コードでは:

var config = require('config');

構成は次のように定義できます:

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

NODE_ENV (例: "development") に基づいて、構成ファイルがロードされます。このファイルからエクスポートされた構成には、環境依存変数を含めることができます。

これらのアプローチを利用すると、gulp や gulp を使用する場合と同様に、webpack ビルド プロセス中に HTML ファイル内の環境依存変数を効果的に管理できます。 gulp 前処理。

以上がAngular アプリケーションの Webpack で環境依存の変数置換をレプリケートする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。