Angular 앱용 Webpack에서 환경 종속 변수를 전달하는 방법은 무엇입니까?

Webpack에서 환경 종속 변수 전달

Gulp에서 Webpack으로 변환된 Angular 앱에서 webpack을 사용하여 Gulp-Preprocess의 기능을 복제합니다. NODE_ENV를 기반으로 변수(예: 데이터베이스 이름)를 동적으로 대체하려면 다른 접근 방식이 필요합니다.

이를 달성하기 위한 몇 가지 옵션이 있습니다.

DefinePlugin

webpack.DefinePlugin을 사용하여 환경 변수를 JSON 문자열로 코드에 직접 삽입합니다.

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

이 기술은 일치하는 문자열을 "있는 그대로" 대체하므로 특정 JSON 형식이 필요합니다. 객체처럼 복잡한 구조도 가능하지만 원리는 동일합니다.

EnvironmentPlugin

DefinePlugin을 내부적으로 활용하는 webpack.EnvironmentPlugin을 활용하세요. 환경 값을 코드에 매핑하여 구문을 단순화합니다.

new webpack.EnvironmentPlugin(['NODE_ENV'])

별칭

별칭이 지정된 모듈을 통해 구성을 사용합니다.

// Consumer side
var config = require('config');

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

기반 NODE_ENV에서 이 예는 원하는 구성을 내보내는 ./config/development.js와 같은 모듈에 매핑됩니다.

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