Webpack에서 전역 변수를 관리하는 방법은 무엇입니까?

Webpack에서 전역 변수를 정의하는 방법

1. 모듈 초기화

Webpack은 모듈을 한 번만 평가하므로 전역 변수 개체가 포함된 globals.js와 같은 모듈을 생성할 수 있습니다. 이 모듈을 다른 모듈로 가져와 해당 속성을 수정하거나 액세스하여 전역 범위를 유지할 수 있습니다.

2. Webpack의 ProvidePlugin

이 플러그인을 사용하면 모듈이 사용되는 모든 모듈에서 변수로 사용할 수 있는 모듈을 만들 수 있습니다. 반복적인 import 문을 제거하여 코드를 단순화합니다. 모듈(예: utils.js)에 ProvidePlugin을 사용하려면 webpack 구성에서 모듈의 별칭을 지정하고 다음과 같이 플러그인에 추가하세요.

new webpack.ProvidePlugin({
  'utils': 'utils'
})

3. Webpack의 DefinePlugin

이 플러그인을 사용하여 문자열 값으로 전역 상수를 정의합니다:

new webpack.DefinePlugin({
  VERSION: JSON.stringify("5fa3b9"),
})

console.log("Running App version " + VERSION);

4. 전역 개체(window/global)

이 접근 방식을 사용하면 브라우저(window.foo = 'bar') 또는 Node.js 환경(global.foo = 'bar')에서 직접 전역 변수 선언이 가능합니다. ). 폴리필에 많이 사용됩니다.

5. 패키지: dotenv

서버 측 프로젝트의 경우 dotenv를 사용하면 구성 변수를 로컬 파일(.env)에 정의하고 Node의 process.env 개체에 자동으로 추가할 수 있습니다.

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