webpack은 자바스크립트 애플리케이션을 위한 정적 모듈 번들러이다. 개발자는 소스 파일을 여러 개의 모듈(예: ES6 모듈, CommonJS, AMD 등)로 구성하고, webpack은 이러한 모듈을 분석하여 의존성을 구축한 뒤 하나 이상의 번들 파일로 결합한다. 이를 통해 브라우저가 효율적으로 로드할 수 있는 형태의 자산을 생성한다.
주요 특징
- 엔트리(entry)와 출력(output): 번들링 대상이 되는 시작점 파일을 지정하고, 결과물 파일명·경로를 정의한다.
- 로더(loader): JavaScript 외에도 CSS, 이미지, 폰트 등 다양한 파일 형식을 모듈처럼 처리한다. 예를 들어
babel-loader는 최신 JavaScript 문법을 구형 브라우저가 실행 가능하도록 변환한다. - 플러그인(plugin): 번들링 과정의 다양한 단계에서 기능을 확장한다. 대표적인 플러그인으로
HtmlWebpackPlugin(HTML 파일 자동 생성),MiniCssExtractPlugin(CSS 파일 분리) 등이 있다. - 코드 분할(code splitting): 동적
import()를 활용해 필요 시에만 로드되는 청크를 생성함으로써 초기 로드 시간을 감소시킨다. - 트리 셰이킹(tree shaking): 사용되지 않은 코드를 분석·제거하여 번들 크기를 최적화한다.
- 개발 서버(dev server):
webpack-dev-server를 통해 파일 변경 시 자동 리로드와 Hot Module Replacement(HMR)를 지원한다.
역사 및 배경
- 최초 공개: 2012년, 독일 출신 개발자 토비아스 코퍼스(Tobias Koppers)가 프로젝트를 시작했다.
- 라이선스: MIT License 하에 배포되며, 오픈소스 커뮤니티에서 활발히 유지·보수되고 있다.
- 생태계: npm 레지스트리와 연동해 수천 개의 로더·플러그인이 제공되며, React, Vue, Angular 등 다양한 프레임워크와 통합된 설정이 존재한다.
사용 예시
// webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
},
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' },
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
},
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' })
],
mode: 'production'
};
위와 같은 설정 파일을 통해 webpack 명령을 실행하면 지정된 엔트리 파일을 시작점으로 의존성을 분석하고, 로더와 플러그인을 적용한 뒤 dist/bundle.js와 같은 번들 파일을 생성한다.
관련 기술
- Babel: 최신 JavaScript 문법을 구형 환경에 맞게 변환한다.
- Rollup, Parcel, esbuild: 다른 모듈 번들러·빌드 도구와 기능·성능 면에서 차별화된다.
webpack은 현대 웹 개발에서 모듈 관리와 최적화를 위한 핵심 도구 중 하나로 널리 채택되고 있다.
