Webpack 컴파일 중에 모듈 가져오기 경로 문제를 해결할 수 있나요?

Question

환경 변수를 기반으로 번들의 특정 구성 요소만 포함하는 빌드를 만들고 싶습니다.

예를 들어 다음과 같이 구성요소를 가져올 때:

'@/comComponents/Module1'에서 Module1 가져오기

가져오기가 다음과 같이 보이도록 경로가 실제로 변환되기를 원합니다.

'@/comComponents/brands/' + process.env.APP_BRAND + 'Module1'에서 Module1 가져오기

이제 모든 가져오기에 대해 이 작업을 수행하고 싶지 않고 특정 가져오기(예: 브랜드 버전이 있는 모듈)에 대해서만 수행하고 싶습니다. 따라서 가져오기 경로 앞에 < code>!brand와 같은 항목을 추가하고 싶을 수도 있습니다. 는 경로 변환을 적용하는 지표가 됩니다. 따라서 위 논리는 다음 가져오기 경로에 대해서만 실행되어야 합니다.

'!brand!@/comComponents/Module1'에서 Module1 가져오기

process.env.APP_BRAND가 false인 경우 원래 가져오기를 유지하고 싶습니다(예: 길 ).

중요한 점은 Webpack이 모듈을 정적으로 분석하고 최적화된 빌드를 생성할 수 있도록 빌드 시 이 작업이 수행되기를 원한다는 것입니다. 이것이 가능합니까? 이런 경로 변환 로직을 어떻게든 추가해야 할 것 같은데 어떻게 해야 할까요? 로더, 플러그인을 만들어야 합니까, 아니면 이미 만들어진 솔루션이 있습니까?

저는 Webpack 5를 사용하고 있습니다.

Answer 1

Webpack은 여기에서 사용할 수 있는 모듈 resolve 기능을 제공합니다. 여기에서 문서를 읽어보세요. 예를 들어, 귀하의 경우 다음과 같이 할 수 있습니다:

으아악

여기서 환경 변수를 Webpack 프로세스(Node.js 프로세스라고도 함)에 전달하고 이를 기반으로 결정을 내려야 한다는 점에 유의하세요. 또한 해결 모듈은 절대 경로여야 합니다.