가장 처음 HTML을 배웠을때, 자바스크립트의 코드를 <script> 태그 안에 구현을 했었다. 과거에는 웹사이트가 비교적 단순했고, HTML 파일에서 몇 개의 JavaScript와 CSS 파일등을 직접 불러오는 방식으로 개발되었습니다. 그러나 웹 애플리케이션이 점점 복잡해지고 프로젝트의 규모가 점점 커지면서 여러 가지 문제점들(전역 오염, 의존성관리)이 발생했고, 이를 해결하기 위해 번들러(Bundler)가 등장했습니다.

Bundle + er: 하나로 여러 파일을 최적화한 최소한의 파일들로 묶어주는 도구

웹애플리케이션에 필요한 파일들을 묶어주는것 뿐만 아니라 최적화를 해준다

• 코드가 커지면서 파일을 분리가 필요했지만 기존 브라우저는 import/export 같은 모듈 기능을 지원하지않아지만 번들러는 모듈 시스템을 지원하여 파일을 효율적으로 로드할 수 있도록 도와줌

• 최신 ES6+를 구형 브라우저에서 사용할수있게 자바스크립트 문법 변환

• 트리 셰이킹(Tree Shaking): 사용되지 않는 코드 자동 제거 → 파일 크기 줄이기

• 코드 스플리팅(Code Splitting): 필요한 코드만 로드 → 첫 페이지 로딩 속도 향상

webpack

가장 대표적인 자바스크립트 번들러로, 많은 기능과 확정성으로 복잡한 프로적테를 효율적으로 모듈화하여 관리 할수있게 도와주고 또한 오래된 만큼 커뮤니티 생태계가 뛰어나고 안정성이 보장되어있다. 하지만 효율적으로 최적화를 하기위해서는 그만큼 설정하는 시간이 많이 소비가 된다.

//wepack.config.js
module.exports = {
  entry: '', // 번들링 프로세스 진입점 
  output: {}, // 번들링된 결과물 경로 및 이름 
  module: { // 로더(모듈) js, json 이외 파일 모듈화 
    rules: []
  },
  plugins: [], // 플러그인 , 번들 최적화 , 환경변수 주입
}

Vite

Vue 프로젝트를 위해 시작되었지만 React 와 같은 프레임워크에서도 사용할수있게 확정되었고 JSX, TS, TSX, SCSS 등을 추가적인 설정이 필요없다. Vite는 브라우저가 직접 ES 모듈을 가져오는 방식을 사용합니다.
즉, 전체 번들링 없이 필요한 파일만 로드하므로, 초기 서버 실행 속도가 빠릅니다.

HMR(Hot Module Replacement, 핫 모듈 교체)

HMR : 코드 변경 사항이 발생했을 때, 페이지를 새로고침하지 않고 즉시 반영하는 기능

기존 webpack은 코드가 변경된 파일있으면 전체를 다시 번들링해야하거나 변경된 부분만 반영하려해도 느리지만, vite는 수정된 파일만 즉시 반영하고 페이지를 새로고침 없이 바로 업데이트를 한다.