빌드 도구 - 모듈 번들러, webpack

모듈 번들러

모듈 번들러란, 웹 애플리케이션을 동작시키기 위한 서로 연관 관계가 있는 웹 구성 자원(HTML, CSS, JavaScript, Images 등)을 모두 각각의 모듈로 보고 이들의 의존성을 묶고 조합해서 합쳐진 하나의 결과물(static한 자원)을 만드는 도구다. 대표적인 번들러로는 webpack, RequireJS, Browserify, Rollup, Parcel 등이 있다.

 

자바스크립트는 오랫동안 모듈 시스템이 없다가 2009년 Node.js가 CommonJS라는 모듈 시스템을 사용하면서 모듈화 된 코딩이 보편화되었다. 그리고 ECMAScript 2015에서 자바스크립트 언어 사양에 신규 모듈 시스템인 ES Module이 포함되어, 이제는 모듈화가 일반적이게 되었다.

// ES Module의 예
import "otherModule";
import { someFunc } from "otherModule";
export const x = 10;

여기서 모듈의 의존 관계를 분석하여 브라우저가 인식할 수 있는 자바스크립트 코드로 변환해야 하는데, 이 역할을 하는 것이 모듈 번들러다.

import { x } from "otherModule";
export const y = x + 10;

// 위와 같은 코드를 모듈 번들러가 아래와 같이 변환한다. 

function (require, module, exports) {
  var { x } = require("otherModule");
  exports.y = x + 10;
}

 

모듈 번들링

 

 

webpack

webpack은 최신 프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러다. 최신 모듈 포맷(CommonJS, AMD, ES6 Module[v2~])을 모두 지원하며 자바스크립트뿐만 아닌 CSS, Image 파일 등의 리소스의 의존성도 관리해준다. 즉, 자바스크립트만이 아니라 이런 파일 하나하나가 모듈인 셈이다.

 

webpack

 

webpack 핵심 개념

1. Entry

자바스크립트가 로딩하는 모듈이 많아질수록 모듈간의 의존성은 증가한다. Entry는 종속성 그래프를 구축하기 위한 시작점으로, config 파일에 설정되어 있지 않으면 ./src/index.js가 기본값이다.

 

2. Output

웹팩에게 번들 파일을 어떤 이름으로, 어디에 생성할 것인지 알려준다. config 파일에 설정되어 있지 않으면 ./dist/main.js가 기본값이다.

 

3. Loader

기본적으로 웹팩은 자바스크립트 및 json 파일만 읽을 수 있다. 하지만 Loader는 스타일시트나 이미지 등을 웹팩이 읽을 수 있도록 자바스크립트로 변경하는 역할을 하여 애플리케이션에서 사용하고 종속성 그래프에 추가할 수 있는 유효한 모듈로 변환할 수 있다.

 

4. Plugin

번들된 파일을 난독화하거나(uglify) 압축하는데 사용한다. Loader가 특정 유형의 모듈을 반환하는 데 사용되었다면, plugin은 번들된 결과물을 처리하는 것이다. 번들 최적화, asset 관리 및 환경 변수 삽입과 같은 광범위한 작업을 수행한다.