Webpack 설정 점검표

설정 항목을 책임 단위로 읽기

Webpack 설정은 시작점, 변환 규칙, 빌드 확장, 실행 환경을 분리해서 보면 수정 범위가 선명해집니다.

config → build → verify
entry

어디서 시작하나

앱의 진입 파일을 정하고 의존성 그래프의 출발점을 만듭니다.

rules

변환 대상

JSX, CSS, 이미지처럼 브라우저 실행 전에 바꿀 파일을 지정합니다.

plugins

빌드 확장 방식

HTML 생성, CSS 추출, 환경 변수 주입처럼 전체 과정을 점검합니다.

mode

목표 환경은 개념

개발은 빠른 피드백, 배포는 압축과 최적화 중심으로 맞춥니다.

개발 확인

webpack serve로 HMR, 콘솔 오류, 화면 반영을 확인합니다.

배포 확인

dist 결과물 크기, 파일 경로, 캐시 이름이 의도와 맞는지 봅니다.

문제 분리

로더 오류는 파일 변환, 플러그인 오류는 빌드 단계부터 추적합니다.