特定の環境に基づいてビルド時に設定ファイルのエンドポイント値を置き換えますか？

Question

私は角型2/4/5アプリケーションの開発に取り組んでいます（そのため2/4/5）、webpackを使ってすべてをバンドルします。アプリケーション自体はC＃で書かれたバックエンドAPIと通信します。ここでは、前述のバックエンドAPIに4つの異なるエンドポイントをもたらす4つの異なる環境をサポートする必要があるため、VSTSビルド定義と組み合わせてnpm run build:environmentの間にエンドポイントの値をどのように置き換えることができるかを検討しました特定のスクリプトを実行するときにも変換を行う必要があります。

これは、設定ファイルがどのように見えるかです：

const AppConfig = {  
    hubName: "eventhub", 
    baseApiUrl: "https://endpoint.com/api/", 
    baseUrl: "https://endpoint.com/" 
}; 

私はwebpack.prod.jsとwebpack.dev.jsで開始し、私は構成された2つのスクリプトがあります。build:prodとbuild:devを。それらのwebpackファイルの両方ともprocess.env.ENVの値をそれぞれproductionとdevelopmentに設定しています。その情報を使って、process.env.ENVの値をのファイルで読み込み、値に基づいてbaseApiUrlとbaseUrlの値を設定しましたが、それはうまくいかなかったが、デフォルトではdevelopmentに戻りました。そのアプローチを放棄し、webpackにnormalModuleReplacementPluginを使用するなど、他のオプションを検討し始めましたが、ほとんど成功しませんでした。

ビルドタスクの実行中に設定ファイルの特定のプロパティを置き換える方法はありますか？

Answer 1

webpack DefinePluginであなたのtypescriptコードの中の変数をwebpack設定ファイルで指定する値に置き換えることができます。

PS：しかし、私の場合には、私は正確な値を指定しない - その代わり、私はWebPACKのコンフィグ内process.envから値を読み取るので、私は唯一のコンフィグ必要です：

plugins: [ 
    new webpack.DefinePlugin({ 
     ENV: JSON.stringify(process.env.ENV) 
    }) 
]