Angular 애플리케이션용 Webpack에서 환경 종속 변수 대체를 어떻게 복제합니까?

Webpack에서 환경 종속 변수 전달

Angular 애플리케이션을 gulp에서 webpack으로 마이그레이션할 때 다음의 기능을 복제하는 방법을 접할 수 있습니다. NODE_ENV에 따라 HTML 파일의 변수를 대체합니다. 이 문서에서는 webpack에서 이를 달성하기 위한 여러 가지 접근 방식을 제공합니다.

DefinePlugin

DefinePlugin을 사용하면 특정 문자열을 "있는 그대로" 환경으로 바꿀 수 있습니다. 변수.

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

EnvironmentPlugin

DefinePlugin과 유사하게 EnvironmentPlugin은 내부적으로 이를 사용하여 환경 값을 매핑합니다. code.

new webpack.EnvironmentPlugin(['NODE_ENV'])

별칭

또 다른 옵션은 별칭 모듈을 통해 구성을 사용하는 것입니다. 소비자 코드에서:

var config = require('config');

구성은 다음과 같이 정의할 수 있습니다.

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

NODE_ENV(예: "개발")를 기반으로 구성 파일이 로드됩니다. 이 파일에서 내보낸 구성에는 환경 종속 변수가 포함될 수 있습니다.

이러한 접근 방식을 활용하면 gulp 및 gulp를 사용하는 것과 유사하게 webpack 빌드 프로세스 중에 HTML 파일에서 환경 종속 변수를 효과적으로 관리할 수 있습니다. 꿀꺽 꿀꺽 전처리.

위 내용은 Angular 애플리케이션용 Webpack에서 환경 종속 변수 대체를 어떻게 복제합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!