Webpack 모듈 그래프

Entry에서 그래프 시작

하나 이상의 entry를 기준으로 import와 dependency를 따라가며 필요한 모듈 목록을 만듭니다.

graph

TypeScript, CSS, 이미지처럼 브라우저가 그대로 실행할 수 없는 입력을 모듈로 바꿉니다.

transform

HTML 생성, 환경 변수 주입, CSS 추출, 압축처럼 빌드 전체 흐름에 개입합니다.

lifecycle

코드 분할과 hash 파일명을 통해 초기 로딩 비용과 장기 캐시 전략을 조정합니다.

output

Loader

파일 하나를 다른 형태로 변환 babel-loader, css-loader, asset loader처럼 모듈 단위로 작동합니다.

file

Plugin

컴파일 과정 전체에 hooks로 개입 HtmlWebpackPlugin, MiniCssExtractPlugin처럼 산출물과 빌드 흐름을 다룹니다.

build

Mode

development와 production 기본 최적화 차이 소스맵, 압축, tree shaking, dev server 설정이 달라집니다.

env

그래프 크기 entry에 큰 라이브러리를 묶으면 첫 화면 번들이 커집니다.

로더 순서 loader는 오른쪽에서 왼쪽으로 적용되므로 CSS 처리 순서를 확인합니다.

캐시 무효화 contenthash를 사용해 내용이 바뀐 파일만 새 이름을 갖게 합니다.

entry: 어디서 시작하는가
module.rules: 파일을 어떻게 바꾸는가
plugins: 빌드 전체에 무엇을 추가하는가
output: 어디에 어떤 이름으로 내보내는가