Webpack이란
자바스크립트 애플리케이션을 위한 모듈 번들러로, 다양한 파일(js,css,image...)을 하나의 번들로 묶어 웹기능을 최적화 하는 역할을 한다.
다수의 자바스크립트 파일을 하나의 자바스크립트 파일로 만들어준다.
특징
모듈 번들링
여러개의 JS파일과 의존성을 분석하여 하나의 번들 파일로 묶음.
코드가 많아도 하나의 파일이나 여러개의 최적화 된 파일로 제공한다.
코드 스플리팅
필요한 코드만 로드하도록 여러 개의 번들로 나눌 수 있음.
import를 활용한 지연 로딩 지원
로더
JS뿐 아니라 CSS, 이미지, 폰트 등 다양한 파일을 처리 할 수 있도록 도와준다.
babel-loader: ES6 + 변환
css-loader: CSS 파일 로드
file-loader: 이미지/폰트 관리.
플러그인
번들링 과정에서 다양한 기능을 추가 할 수 있다. (압축, html 생성, 환경변수 설정 등)
HtmlWebpackPlugin, TerserPlugin 등
HMR(Hot Module Replacement)
코드 수정 시 전체 페이지를 새로고침 하지 않고 변경된 부분만 즉시 반영.
트리 셰이킹
사용하지 않는 코드를 자동으로 제거하여 번들 크기를 줄이는 기능.
ES6 import/export 문법을 사용하면 Webpack이 불필요 코드를 감지한다.
장점
의존성 관리
여러개의 파일을 효율적으로 관리하고 하나의 번들로 묶어 배포한다.
웹 애플리케이션 최적화
코드 스플리팅, 압축, 트리 셰이킹 등을 통해 성능을 향상시킨다,
다양한 파일 형식 지원
JS, CSS, SCSS, 이미지, 폰트 등 여러 형식의 파일을 번들링한다.
개발 환경 개선
Webpack Dev Server, HMR 기능을 통해 빠른개발 가능
확장성
플러그인과 로더를 추가하여 다양한 기능 구현이 가능하다.
Webpack의 동작 방식
Entry(진입점) 지정
Webpack이 시작할 파일을 설정 할 수 있다.
entry: './src/index.js'Dependency Graph(의존성 그래프) 생성
파일간 의존성을 분석하여 모듈을 연결한다.
Loaders 적용
JavaScript, CSS, 이미지 등 파일 처리
Plugins 실행
번들 파일을 최적화 하고 추가기능을 적용한다.
Output(출력 파일 생성)
최종 번들 파일을 dist/ 폴더에 생성
React(CRA), Next, Vue, Angluar 등의 프레임워크(라이브러리)에도 Webpack이 내장되어 있으며, Vite, Parcel 등의 대체 번들러가 존재한다.
