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

Webpack에서 환경 종속 변수 전달

Angular 앱을 Gulp에서 Webpack으로 마이그레이션할 때 일반적인 작업은 환경 종속 변수를 관리하는 것입니다. Webpack을 사용하여 이를 달성하는 세 가지 효과적인 방법은 다음과 같습니다.

1. DefinePlugin

이 메소드는 DefinePlugin을 사용하여 HTML 페이지의 변수를 직접 대체합니다.

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

문자열 형식은 변수의 환경 값을 유지합니다.

2. EnvironmentPlugin

EnvironmentPlugin은 환경 값을 내부적으로 코드에 매핑하여 DefinePlugin 프로세스를 단순화합니다.

new webpack.EnvironmentPlugin(['NODE_ENV'])

3. 별칭

복잡한 구성이 필요한 경우 별칭이 지정된 모듈을 사용할 수 있습니다.

소비자 측:

var config = require('config');

구성 모듈:

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

이를 통해 다음에서 구성을 내보낼 수 있습니다. 환경변수에 따라 모듈을 지정합니다.

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