Webpack dev server를 이용한 개발 환경 구성 Part2
데브옵스
Webpack dev server를 이용한 개발 환경 구성 Part2
두줄요약
Webpack Dev Server의 proxy로 모든 요청을 백엔드에 우회시키고, HTML 응답에만 번들 스크립트를 주입하는 dev 모드를 구성했습니다. 이를 통해 SPA와 서버 템플릿을 함께 테스트하면서 CORS 없이 배포 유사 환경을 만들었습니다.
구조와 흐름
- Webpack Dev Server의 proxy로 모든 요청을 백엔드로 우회시키는 개발 모드 구성
- 응답이 HTML인 경우에만 entry 기반 script 태그를 동적으로 삽입해 SPA와 서버 템플릿 혼합 개발 지원
- HtmlWebpackPlugin 제거, splitChunks 비활성화 등 dev 모드에 맞춘 웹팩 설정 조정
적용해볼 점
- 프론트엔드 단독 개발 모드와 백엔드 연동 dev 모드를 분리해 목적별로 운영
- 배포 환경과 유사한 요청 흐름을 유지해 CORS 없이 로컬 테스트 환경 구성
- 템플릿 파일과 build 템플릿을 분리해 개발용과 배포용 산출물 관리