특정 환경을 기반으로 빌드 중에 구성 파일의 엔드 포인트 값을 바꿉니 까?

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 시작 내가 구성된 두 개의 스크립트가 있습니다 : build:prod 및 build:dev을

이 같은 설정 파일이 모습입니다. 각각 webpack 파일은 process.env.ENV의 값을 production 및 development으로 각각 설정합니다. 그 정보를 사용하여 값을 읽고 switch/case을 수행하고 값을 기준으로 baseApiUrl 및 baseUrl 값을 설정했지만 작동하지 않았 더라면 항상 기본값 development으로 유지되었으므로 그 방법을 포기하고 webpack에 normalModuleReplacementPlugin을 사용하는 것과 같은 다른 옵션을 탐색하기 시작했지만 거의 성공하지 못했습니다.

빌드 작업을 실행하는 동안 구성 파일의 특정 속성을 바꿀 수있는 더 좋은 방법이 있습니까?

Answer 1

webpack DefinePlugin을 사용하면 입력 코드의 변수를 webpack 구성 파일에 지정한 값으로 바꿀 수 있기 때문에 더 나은 결과를 얻을 수 있습니다.

PS :하지만 내 경우에는 내가 정확한 값을 지정하지 않는 - 대신 내가 그래서 하나의 설정이 필요합니까 웹팩 설정 내부 process.env의 값을 읽어

이

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