wep pack & Bundling

김내현·2024년 11월 15일

개인공부

목록 보기

19/51

웹팩(Webpack)과 번들링(Bundling)에 대해 간단히 설명해 드리겠습니다:

번들링(Bundling):
- 번들링은 여러 개의 파일을 하나로 묶는 작업을 말합니다[1][3].
- 웹 애플리케이션을 구성하는 HTML, CSS, JavaScript 등 여러 모듈을 하나의 파일로 합치는 과정입니다[2][3].
- 목적: 네트워크 요청 횟수를 줄이고, 파일 크기를 최적화하여 웹 성능을 향상시킵니다[1][3].
웹팩(Webpack):
- 웹팩은 가장 널리 사용되는 모듈 번들러입니다[3][4].
- 주요 기능:
  a) 모듈 의존성 분석 및 번들링
  b) 코드 최적화 및 압축
  c) 다양한 유형의 파일(JS, CSS, 이미지 등) 처리[1][4]
- 장점:
  a) 모듈 단위의 코드 작성 가능
  b) 네트워크 병목 현상 완화
  c) 웹 개발 작업 자동화[3]
웹팩의 주요 구성 요소:
- Entry: 번들링 시작점 설정
- Output: 번들링 결과물 설정
- Loaders: 다양한 유형의 파일 처리 (예: Babel 로더로 최신 JS를 구버전으로 변환)
- Plugins: 번들링 프로세스 최적화 및 자동화[5]
웹팩 사용 이유:
- 복잡한 의존성 관리
- 코드 분할 및 최적화
- 개발 환경 개선 (예: 개발 서버, 핫 리로딩)
- 다양한 자원(CSS, 이미지 등)의 통합 관리[1][4][5]

웹팩은 현대 웹 개발에서 필수적인 도구로, 복잡한 프론트엔드 프로젝트를 효율적으로 관리하고 최적화하는 데 큰 도움을 줍니다.