모듈 번들러

*️⃣ 모듈 번들러

Module(분리된 코드 조각) + Bundler(묶는다)

 

모듈 번들러는 분리된 코드 조각들을 하나로 병합하는 개발 도구이다.
핵심 작업은 JS 파일, CSS 파일 등 여러 리소스를 하나로 결합하여 단일 파일을 만드는 것이다.
따라서 크롬과 같은 브라우저는 하나의 단일 파일을 로드함으로써 애플리케이션이 동작하게 된다.

 

ℹ️ 모듈 번들러를 사용하는 이유

• 모든 브라우저가 모듈 시스템을 완전하게 지원하지 않는다.
• 코드의 종속성 관계를 관리하는데 도움이 되며 종속성 순서대로 모듈을 로드한다.
• 이미지 에셋, css 에셋 등 종속성 순서대로 에셋을 로드하는 데 도움이 된다.

 

*️⃣ 모듈 번들러 역사와 설명

아래 글에 모듈 시스템에 대한 설명이 자세히 되어 있습니다. 참고하세요

https://yozm.wishket.com/magazine/detail/1261/

JavaScript 번들러로 본 조선시대 붕당의 이해 | 요즘IT

 

 

 

*️⃣ 모듈 번들러 종류

https://2022.stateofjs.com/en-US/libraries/build-tools/

build tools 사용량

 

 

#️⃣ Webpack

https://webpack.kr/

webpack

 

 

#️⃣  Vite

https://ko.vitejs.dev/

Vite

 

 

#️⃣  Rollup

https://rollupjs.org/

Rollup

 

 

*️⃣ 모듈 번들러 비교 및 분석

https://bepyan.github.io/blog/2023/bundlers

차세대 번들러 비교 및 분석 (feat. webpack, rollup, esbuild, vite)

 

 

---

 

 

• 많은 서드파티를 필요로 하는 복잡한 애플리케이션이라면 웹팩
• 최소한의 서드파티로 라이브러리를 만들고 싶다면 롤업
• 복잡한 설정을 피하고 비교적 간단한 애플리케이션을 만들고 싶다면 파셀