Webpack 5를 사용하다 보면 아래와 같은 에러를 만날 수 있습니다:
Error: Rule can only have one resource source (provided resource and test + include + exclude)
이 에러는 Webpack의 규칙 설정에서 resource, test, include, exclude를 함께 사용했을 때 발생합니다. Webpack 5에서는 이러한 조합이 허용되지 않으며, 설정을 분리하거나 규칙을 수정해야 합니다.
하지만 만약 프로젝트의 의존성 문제나 기존 코드와의 호환성 때문에 Webpack 5를 사용하는 것이 어렵다면, Webpack 4로 다운그레이드하여 문제를 해결할 수 있습니다.
---
Webpack 버전 다운그레이드 방법
아래는 Webpack을 버전 4로 다운그레이드하는 방법입니다.
1. 기존 Webpack 제거
먼저, 현재 설치된 Webpack을 제거합니다:
npm uninstall webpack
2. Webpack 4 설치
Webpack 4를 설치하려면 아래 명령어를 실행하세요:
npm install webpack@^4.0.0 --save-dev
이 명령은 Webpack 4의 최신 호환 버전을 설치하며, --save-dev 옵션을 통해 개발 의존성으로 추가합니다.
---
설정 파일 변경 없이 해결하기
Webpack 4로 다운그레이드하면, 기존 설정 파일을 수정하지 않아도 대부분의 문제가 해결됩니다. 다만, Webpack 4는 Webpack 5의 최신 기능(예: 모듈 연합, 기본 캐싱 최적화 등)을 지원하지 않으니, 필요한 경우 추가 설정을 검토해야 합니다.
---
Webpack 5를 계속 사용하고 싶다면?
Webpack 5를 유지하려면 아래와 같은 방법으로 에러를 해결할 수 있습니다:
1. 규칙 재설정
test, include, exclude의 조합을 수정하여 규칙을 분리합니다.
2. resource 대신 test 사용
resource 키워드를 test로 대체하여 Webpack의 규칙을 간소화합니다.
---
결론
Webpack 5에서 "Rule can only have one resource source" 에러는 설정을 수정하거나 Webpack을 다운그레이드하는 방식으로 해결할 수 있습니다. 만약 기존 프로젝트가 Webpack 4에 더 적합하다면, 위 방법대로 다운그레이드를 통해 에러 수정을 진행하실 수 있습니다.