번들러 란 (모듈 번들러, webpack)

리액트를 다루는 기술 책을 공부하다가 16장에서 'Parcel로 프로젝트 만들기' 라는 챕터가 나왔고 Parcel이라는 것이 무엇인지 찾아보다가 그것이 '웹 어플리케이션 번들러(모듈 번들러)'의 일종이란 것을 알게 되었고 번들러라는 것에 대해 찾아 봤다.

 

우선 모듈(Module)이라는 것은 프로그래밍의 관점에서 보았을 때 '특정 기능을 갖는 작은 코드 단위'라고 할 수 있다. 

// math.js
function sum(a, b) {
  return a + b;
}

function substract(a, b) {
  return a - b;
}

const pi = 3.14;

export { sum, substract, pi }

 

위의 math.js는 합을 구하는 sum 함수, 차를 구하는 substract 함수, 원주율을 구하는 pi 상수, 세 가지로 이루어진 하나의

모듈이 되는 것이다. 모듈은 이러한 프로그래밍의 꾸러미라고 볼 수 있고 이것은 효율성에서 아주 좋다. 만일 위의 자바스크립트 코드가 매우 복잡하고 길다면 모듈화 하여 다른 파일에서 필요할 때 가져와서 사용할 수 있게 할 수 있다.

 

그렇다면 웹팩과 같은 모듈 번들러가 기능하는 관점에서의 모듈은 웹 애플리케이션을 구성하는 모든 자원을 의미한다. 그것은 HTML, CSS, Javascript, Images, Font 등 이 될수 있겠고 이 파일 하나하나가 모두 모듈이다.

 

그리고 번들러란 소프트웨어 및 하드웨어와 작동하는데 필요한 모든 것을 포함하는 패키지라고 정의한다고 한다. 이를 프로그래밍적으로 접근하자면 필요한 의존성에 대해 추적하여 해당하는 의존성들을 그룹핑 해주는 도구라고 할 수 있다.

즉 모듈 번들러란,

 

웹 애플리케이션을 동작시키기 위한 서로 연관 관계가 있는 웹 구성 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이들의 의존성을 묶고 조합해서 합쳐진 하나의 결과물(static한 자원)을 만드는 도구 

 

라고 말할 수 있다. 

위의 그림과 같이 모듈 번들러가 행하는 모듈 번들링은 여러가지 웹 어플리케이션에 필요한 파일들의 의존성을 한데 묶고 조합하여 압축, 축소하여 static한 자원으로 뱉어내는 것이다.