[웹개발] 번들러

Bundler

- Bundler: 웹 애플리케이션을 개발하기 위해 필요한 HTML, CSS, JS 등의 모듈화된 자원들을 모아서 하나 혹은 최적의 소수 파일로 결합(번들링)하는 도구

- Bundler는 결합을 위해 프로젝트를 해석하는 과정에서 불필요한 주석이나 공백 제거, 난독화, 파일 압축 등의 기본 작업과 함께 최신 문법이나 개발에 편리한 특수 기능 등을 브라우저가 지원하는 형태로 변환하는 작업도 수행

- Webpack, Parcel, Rollup이 있음

Webpack에서 소개하는 번들러의 기본 개념

Webpack

- 대표적인 JavaScript 번들러

(Webpack 기능)

- Module Bundling: 진입점에 연결된 단일 파일로 묶어 줌

- Automatic Bundle Optimization: 번들 최적화를 통해 보다 더 작은 번들을 생성하고 그만큼 빠르게 로딩

- Code Splitting: 모듈을 chunk로 분리하여 동적으로 필요한 모듈만 로딩

- Tree Shaking: 사용되지 않는 코드를 제거해 번들의 크기를 줄이고 성능을 향상시킬 수 있음

- Development Server: 코드가 변경될 때마다 브라우저에 반영(HMR)되는 개발용 서버를 실행할 수 있음

Webpack 사용법

1) 기본 패키지 설치

npm i -D webpack webpack-cli webpack-dev-server

2) Webpack을 실행할 스크립트를 package.json 파일에 추가

{
  "scripts": {
    "dev": "webpack serve --mode development --open",
    "build": "webpack --mode production"
  }
}

3) Webpack은 webpack.config.js 파일을 통해 프로젝트의 구성을 설정

- 옵션 종류: 진입점(Entry) / 출력(Output) / 로더(Loaders) / 플러그인(Plugins)

- webpack.config.js 파일은 프로젝트 root 경로에 위치. CommonJS 모듈 방식으로 작성

module.exports = {
  entry: '', // 진입점
  output: {}, // 출력
  module: { // 로더(모듈)
    rules: []
  },
  plugins: [], // 플러그인
  // 기타 옵션...
}

 

빌드도구

- Build tool: 프로젝트 빌드 과정의 전체적인 흐름을 관리하기 위한 도구로, 보통 번들러를 기본 포함하고 개발 서버나 린팅, 테스트 등의 추가로 개발에 필요한 여러 도구를 가지고 있습니다.

Vite

- Vite: Vue.js 프로젝트를 위해 시작되었지만, React나 Svelte 같은 다른 프레임워크에서 사용할 수 있도록 확장

- 프로젝트 크기와 상관없이 최고의 빠른 속도를 유지하는 개발 서버를 제공(HMR)

- JSX, TS, TSX, SCSS 등을 추가 구성없이도 즉시 지원

- 개발 서버와 제품 빌드 간의 차이가 없도록 최적화

- 내부적으로 Rollup 번들러를 사용

 

Vite 사용법

1) 기본 패키지 설치

npm create vite@latest
> React 선택
> JavaScript + SWC 선택

npm i
npm i -D sass

 

 

참고자료

- [HEROPY DEV] 번들러와 빌드 도구의 이해

- [Webpack] 메인페이지

- [Vite] 메인페이지