모듈 번들러(Webpack) 완전 정리

웹 애플리케이션 배포의 흐름

• 웹 애플리케이션 개발 → 웹 서버에 배포 → 브라우저가 접속
• 현대 웹 앱은 수십~수백 개의 자바스크립트 모듈로 나뉨
• 개발할 땐 쪼개서 관리하기 쉽도록 분리
• 하지만 배포할 땐:
  • 파일 수가 많으면 → HTTP 요청 많아져서 느려짐
  • 파일 관계 관리가 복잡해짐

→ 그래서 모듈 번들러가 등장!

---

✅ 모듈 번들링이란?

---

번들링이란?

여러 개로 나눠놓은 JS 파일들을 → 하나(또는 소수)로 합치는 것

---

✅ 왜 번들링할까?

• 네트워크 요청 최소화 → 성능 개선
• 의존 관계를 자동으로 해결
• ES Module, CommonJS 등 모듈 시스템을 브라우저가 이해할 수 있도록 변환

---

비유

• 개발 중 → 각자 A4 용지에 코드를 적음
• 배포 → A4 수백 장을 복사해서 배포하면 너무 비효율적
• → “모든 내용을 한 권의 책으로 묶어 배포”하는 게 번들링!

---

✅ Webpack (웹팩)

---

웹팩이란?

• 자바스크립트, CSS, 이미지 등 모든 리소스를 모듈처럼 관리
• 번들링뿐 아니라:
  • 압축(minify)
  • 코드 분할(code splitting)
  • 트리 쉐이킹(tree shaking)
  • 로더(loader)로 다른 파일 처리

---

네트워크에서 번들링 확인하기

• 개발자 도구 → Network 탭
• 각각의 JS 파일이 별도로 로드되는지, 혹은 하나로 합쳐졌는지 확인 가능
  • 번들링 전: /utils.js, /api.js 등 각각 요청
  • 번들링 후: /bundle.js 하나만 요청

---

✅ 웹팩 설치하기

---

설치 명령어

npm install --save-dev webpack webpack-cli

---

웹팩 실행 방법

---

1) 기본 실행 (npx)

npx webpack --entry ./src/index.js --output-path ./dist

• --entry: 진입 파일
• --output-path: 결과물 경로

---

2) webpack.config.js 사용

보통 설정 파일을 따로 둔다.

webpack.config.js 예:

const path = require('path');

module.exports = {
  mode: 'development', // or 'production'
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

실행:

npx webpack

---

✅ production vs development

mode	특징
development	빠른 빌드 속도, 압축 안함, 디버깅 용이
production	코드 압축, 최적화, 배포 용

---

production 예

webpack.config.js

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js'
  }
};

빌드 실행:

npx webpack

결과:

• 코드가 minify(압축)
• 주석 제거
• 파일 용량 작아짐

---

✅ 번들링 없으면 어떻게 될까?

• 수많은 JS 파일 각각 서버 요청
• 네트워크 비용 ↑
• 성능 저하
• 의존관계 꼬일 위험

→ 그래서 반드시 번들러 필요!

---

✅ 한 줄 정리

“개발할 땐 쪼개고, 배포할 땐 합친다.
그것이 번들링!”