tooling
Webpack.
번들러 역할, entry/output, loader, plugin, dev server, HMR
Webpack은 여러 **모듈(JS, CSS, 이미지 등)**을 의존 그래프로 묶어 브라우저가 로드할 번들을 만드는 모듈 번들러입니다.
🧰 Webpack이 하는 일
- Entry — 그래프 시작점 (
./src/index.tsx) - Resolve — import 경로 해석 (alias, extension)
- Loaders — non-JS → JS module (babel-loader, css-loader, file-loader)
- Plugins — 번들 최적화, HTML inject, env 변수 (HtmlWebpackPlugin, DefinePlugin)
- Output —
dist/bundle.[contenthash].js - Code Splitting — dynamic
import()→ chunk
🔀 Loader vs Plugin
| Loader | Plugin | |
|---|---|---|
| 시점 | 파일 변환 (module level) | 번들 lifecycle 전반 |
| 예 | babel-loader, sass-loader | MiniCssExtractPlugin, TerserPlugin |
module: {
rules: [
{ test: /\.tsx?$/, use: 'babel-loader', exclude: /node_modules/ },
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
],
},
plugins: [new HtmlWebpackPlugin({ template: 'index.html' })],
🔥 Dev Server, HMR
-
메모리에서 serve, proxy API
-
전체 reload 없이 변경 모듈만 교체
-
React Fast Refresh — HMR + React 컴포넌트 state 유지 (babel plugin)
-
Create React App(legacy), Next.js(custom webpack), Storybook webpack config
-
chunk 크기 시각화
-
ESM +
sideEffects: false+ production mode -
Next.js 15는 기본 Turbopack dev, webpack도 선택 가능
🔗 참고 자료
- Concepts — entry, output, loader, plugin 개념을 설명한다.
- Loaders — 모듈 단위 변환 규칙을 설명한다.
- Plugins — 번들 라이프사이클 확장을 설명한다.
- Hot Module Replacement — HMR 동작을 설명한다.