WebPack

Webpack이란?

Webpack은 JavaScript 애플리케이션을 위한 **모듈 번들러(Module Bundler)**이다.

여러 개의 자바스크립트 파일, CSS, 이미지 등을 하나의 파일(혹은 효율적인 여러 파일)로 묶어 배포할 수 있도록 최적할수있는 도구

Webpack이 필요한이유??

문제 상황

• 프로젝트가 커질수록 많은 자바스크립트 파일과 CSS 파일이 생김
• 브라우저가 모든 파일을 개별적으로 가져오면 속도가 느려지고 관리가 어려워짐
• 최신 JavaScript 문법은 일부 브라우저에서 지원되지 않을 수 있기때문이다.

해결 방법

• 모듈 번들링: 여러 파일을 하나로 묶어 네트워크 요청을 최소화
• 코드 압축(uglify): 파일 크기를 줄여 로딩 속도 개선
• 트랜스파일링(Babel): 최신 문법을 구형 브라우저에서도 사용 가능하도록 변환

Webpack의 주요 개념

개념설명

Entry	애플리케이션의 시작점(기본값: src/index.js)
Output	번들링된 파일의 출력 위치(기본값: dist/main.js)
Loaders	JS 외 파일(CSS, 이미지 등)을 처리하는 방식
Plugins	번들 최적화, HTML 생성 등 추가 기능 확장
Mode	개발(development) 또는 배포(production) 설정

 

 요약

• Webpack은 모듈 번들러로 여러 파일을 묶어 최적화된 웹 애플리케이션을 만들수있다.
• Entry, Output, Loaders, Plugins 개념이 중요함
• CSS, 이미지, Babel 트랜스파일링 등을 처리할 수 있다.

포트폴리오 프로젝트나 대형 프론트엔드 애플리케이션을 개발할 때 필수 도구이다. 😎