모듈 번들러(Module Bundler)

bundle : (동사) ~을 마구 싸 보내다[밀어 넣다]

 

웹 환경에서는 머신의 성능과 관계 없이 인터넷 속도나 거리 등에 의해서 영향을 받을 수 있습니다. 그래서 가능하면 파일을 나누어서 요청을 받기 보다는 하나로 합쳐서 보내는 것이 현명합니다. 번들러는 지정한 단위로 파일들을 하나로 만들어서 요청에 대한 응답으로 전달할 수 있는 환경을 만들어 주는 역할을 합니다.

 

모듈 번들러의 등장 배경

• 수많은 모듈들의 의존성처리를 해결해야만 했다(여러 개의 자바스크립트 파일을 각각 <script>태그에 쓴다고 생각해보면 끔찍할 것이다)
• 모듈이 많아질 수록 HTTP 요청이 많아질테고 이로 인해 오버로드를 해결해야 했다

모듈 번들러는 각각의 모듈 의존성을 해결하여 하나의 자바스크립트 파일로 만들어줍니다.

 

모듈 번들러의 종류

• Webpack
• Rollup
• Browserify

모듈 번들러로는 여러 종류가 있지만 Webpack이 가장 널리 쓰이고 있으며, 트랜스파일러인 babel과 궁합도 좋은 편이라고 합니다.

 

Webpack의 동작 방식에 대해 알아보겠습니다.먼저 3개의 파일(circle.js, square.js, app.js)을 번들링 한다고 예를 듭시다.

modules라는 자바스크립트 객체에 개별 함수들을 넣어주고 함수들을 넣어줌으로써 wrapping이 됩니다. 그리고 webpackStart로 모든 모듈들을 접합시켜줍니다.

 

webpackStart는 이렇게 생겼습니다.(띠용... 이게 뭔지 저는 잘 모르겠습니다. 차후 깊이있게 알아봐야겠습니다)

 

리액트를 쓸 때 Create React App 툴을 사용하기 때문에 Webpack이 언제나 같이 설치되었고 그냥 그런건가보다 넘어갔었는데 바닐라 자바스크립트로 직접 Webpack을 사용해서 번들링을 해봐야겠습니다.

 

참고 및 출처

dev.to/tanhauhau/what-is-module-bundler-and-how-does-it-work-3gp2

What is module bundler and how does it work?