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가 '개발'인 경우 별칭이 지정된 모듈은 ./config/development.js에 위치합니다:

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

위 내용은 Webpack을 사용하여 Angular 애플리케이션에서 환경 종속 변수를 전달하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!