webpack

웹팩(webpack)이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)다.

 

그럼 모듈과 번들러는 무엇일까..?

 

모듈(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 파일은 아래와 같이 3가지 기능을 갖고 있는 모듈이다.

1. 두 숫자의 합을 구하는 sum() 함수
2. 두 숫자의 차를 구하는 substract() 함수
3. 원주율 값을 갖는 pi 상수

 

이처럼 성격이 비슷한 기능들을 하나의 의미 있는 파일로 관리하면 모듈이 된다. 잘 만든 모듈 패턴은 하나의 파일이 하나의 모듈이 되며, 하나의 파일은 하나의 scope가 되도록 구현해야 한다. 그래야 파일 내에서 변수도 자유롭게 선언할 수 있고, 관련 기능만 하나의 파일에 구현해서 다른 파일의 방해를 받지 않을 수 있게 된다!!

 

 

번들러(bundler)

번들이란 여러 파일, 여러 구성을 합치는 것을 말하므로 번들러란 합치게 해주는 것을 말한다.

 

번들러는 모듈 간의 의존성을 파악하여 하나의 파일로 만들어준다.

(npm run build 후에 하나의 자바스크립트 파일로 나온 결과물이 바로 번들된 결과이다)

 

 

웹팩(webpack)

웹팩에서 지칭하는 모듈이라는 개념은 위와 같이 자바스크립트 모듈에만 국한되지 않고 웹 애플리케이션을 구성하는 모든 자원을 의미한다. 웹 애플리케이션을 제작하려면 HTML, CSS, Javascript, Images, Font 등 많은 파일들이 필요한데, 이 파일 하나하나가 모두 모듈인 것이다.

 

아래 그림과 같이 웹 애플리케이션을 구성하는 수많은 자원들을 하나의 파일로 병합 및 압축해주는 동작을 모듈 번들링이라고 하는 것이다.

https://webpack.js.org/

 

유지보수를 좋게 한다고 웹 페이지를 여러 자바스크립트 파일로 다 모듈화 시킨다면 렌더링 퍼포먼스가 안 좋아질 것이다. 때문에, 개발은 파일별로 하되 실제 브라우저에서는 하나의 파일만 가지고 있는 것이 좋을 것이다.

 

그래서 웹팩을 통해 여러 자바스크립트 파일을 하나로 만들어주는 것이다!