모듈과 번들러
모듈
- 특정 기능을 가진 작은 코드 단위
- 기능이 비슷한 것들을 모아서 하나의 의미 있는 파일로 관리하는 것
- 커다란 장치나 배열 내에서 비교적 작은 크기의 부품
- 독립적으로 설치되고, 교체되고, 사용될 수 있도록 설계된 구성요소
번들러
- 의존성이 있는 모듈 코드를 하나(또는 여럿)의 파일로 만들어주는 도구
- 지정한 단위로 파일들을 패키지로 만들어주는 도구
모듈 번들러
- 웹개발에 있어 앱을 구성하는 자원(html,css,javascript,image 등)을 모두 각각의 모듈로 보고, 이를 모두 합쳐주는 도구
- 하나의 파일(또는 소량의 파일)로 결과물을 만들어주기 때문에 빠른 로딩 속도, 높은 성능을 얻을 수 있음
- Parcel, Rollup, Webpack등이 있다
Parcel
- 빠르고 간단하게 앱을 만들 때 좋음
- HTML파일 읽고 필요한 것들을 직접 참조하는 방식
- 때문에 설정파일 없이도 사용 가능
- 소규모로 진행하기에 적합
Rollup
- 모듈들의 공통부분을 파악하고 독립된 모듈로 분리도 가능
- 최소한의 설정으로 쉽게 만들고 싶을 때 사용
- webpack, parcel과 다르게 자체로더가 아닌 ES6 모듈을 기본으로 따른다는 장점
- 플러그인 사용
- 다른 두 번들러와 비교해 상대적으로 효율성을 가져갈 수 있음
Webpack
- 오랜기간 발전/지원되어 안전하고 광범위한 기능 제공
- 다양한 플러그인과 로더지원
- 복잡한 앱 개발도 문제없음
- 설정이 까다롭고 학습시간이 오래걸림
참고
'More than TIL > Bundlers' 카테고리의 다른 글
| webpack5 경로(별칭) 설정하기 (0) | 2022.05.13 |
|---|---|
| Uncaught ReferenceError: process is not defined (Webpack) (0) | 2022.05.07 |
| NPM 웹팩(WebPack) 번들러 시작하기 2 (0) | 2022.05.07 |
| NPM 웹팩(WebPack) 번들러 시작하기 1 (0) | 2022.05.06 |
| regeneratorRuntime is not defined Parcel (0) | 2022.05.01 |