모듈 번들러?
예전 CRA를 통해 개발을 시작할 때부터, 지금 가장 트렌드인 Vite 빌드 도구, Webpack, Rsbuild까지 없어서는 안 되는 역할을 하고 있다.
Webpack, Vite, Rsbuild에서는 번들러를 각각 이렇게 정의하고 있다.
Webpack
본질적으로 웹팩(webpack)은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러입니다. 웹팩이 애플리케이션을 처리할 때, 내부적으로 하나 이상의 엔트리 포인트(진입점)로부터 의존성 그래프(Dependency Graph)를 형성하고, 프로젝트에 필요한 모든 모듈을 묶어 하나 이상의 번들로 만들어냅니다.
출처: Webpack Official Docs - Concepts
Vite
Vite는 모던 웹 프로젝트를 위해 더 빠르고 간결한 개발 경험을 제공하는 것을 목표로 하는 빌드 도구입니다. Vite는 크게 두 가지 주요 부분으로 구성됩니다. 하나는 (네이티브 ES 모듈 기반의) 개발 서버이며, 다른 하나는 코드를 묶어주는 (Rolldown / Rollup 기반의) 빌드 명령어입니다.
출처: Vite Official Docs - Getting Started
Rsbuild
도구 정의
Rsbuild는 Rspack 기반으로 동작하는 빌드 도구입니다.
출처: Rsbuild Official Docs - Guide
번들러(Bundler)의 정의 (용어집)
번들러(Bundler): Rspack이나 Webpack과 같은 모듈 번들러를 의미합니다. 번들러의 주요 목적은 JavaScript, CSS 및 기타 파일들을 결합하여 그 결과물이 브라우저에서 실행될 수 있도록 하는 것입니다. 번들러가 웹 애플리케이션을 처리할 때, 이들은 의존성 그래프를 작성하고 각 모듈을 하나 이상의 번들로 결합합니다.