Module Bundler (모듈 번들러)

module bundler의 일종인 webpack

 

Module bundler : Javascript 및 여러 종속성을 가진 파일을 단일 파일로 묶는 도구. Webpack, Browserify, Rollup 등이 있다.

Webpack에 대해 알아보려다가 module-bundler에서부터 막혀서 알아본다.

---

이런 일을 해준단다. (이미지 출처: 공식 페이지)

이미지가 너무 강력해서 더 정리할 필요가 없네...

---

그렇다면 Module-bundler 를 왜 쓸까?

그에 대해 설명하기 전에 잠깐 Module-Loader를 잠깐 짚어봐야 할 것 같다. Module-Loader 역시도 Module을 이용하는 한 가지 방법이다.

Module-Loader 와 Module-Bundler 의 주요한 차이점은 실행되는 시점이다.

Module-Loader는 Runtime에 실행되고, Module-Bundler는 Buildtime에 실행된다.

또 Module-Bundler는 Buildtime 에 필요한 Module 을 다 합쳐버리고, 필요 없는 녀석들은 빼버린다. 즉, 번들의 크기가 줄어든다.

예를 들면,
A 라는 어플리케이션이 500개의 script 파일을 로드해야 한다면, Module-Loader는 요청을 500번 날리게 될테고, Module-Bundler는 한번만 날려도 될 것이다. 

 

생각컨대, Module-bundler를 사용하는 이유는

• Network 의존도를 낮출 수 있다. 
• Bundle (패키징된 스크립트 파일)의 크기를 줄일 수 있다.

 

단, Module-Bundler가 Module-Loader 보다 반드시 좋은 것은 아니라고 한다. 이에 관한 내용은 stackflow 글 링크를 걸어두겠다.

---

Module-Bundler의 동작방식이 궁금하다면 아래 세번째 링크 글을 보면 된다. 

https://beomy.tistory.com/41

[webpack] webpack 개념

https://m.blog.naver.com/PostView.nhn?blogId=magnking&logNo=220959942351&proxyReferer=https:%2F%2Fwww.google.com%2F

번들러란 무엇인가?

https://www.freecodecamp.org/news/lets-learn-how-module-bundlers-work-and-then-write-one-ourselves-b2e3fe6c88ae/

Let’s learn how module bundlers work and then write one ourselves

https://junwoo45.github.io/2019-04-25-%EB%AA%A8%EB%93%88_%EB%AA%A8%EB%93%88%EB%A1%9C%EB%8D%94_%EB%AA%A8%EB%93%88%EB%B2%88%EB%93%A4%EB%9F%AC/

모듈, 모듈로더, 모듈번들러란

https://stackoverflow.com/questions/38864933/what-is-difference-between-module-loader-and-module-bundler-in-javascript

What is difference between Module Loader and Module Bundler in JavaScript?