모듈의 등장
원래 자바스크립트는 모듈로 가져오거나 내보내는 방법이 없었다. 때문에 하나의 파일에 모든 기능을 담아야 했다.
여러 가지 기능을 하나의 파일 내부에 모두 작성하고 관리하게 되면 코드의 양이 방대해지고 가독성이 떨어진다. 게다가 현대의 웹 애플리케이션은 예전과 달리 훨씬 복잡하고 고도화 되어가고 있기 때문에 하나의 파일에 모든 코드를 담는 게 불가능해졌다. 하나의 파일로 관리할 경우 유지보수를 할 때에도 방대한 코드를 전부 다 봐야하는 상황이 발생한다.
프로그램을 모듈로 개발하고 배포할 수 있게 하기 위해 CJS, AMD, UMD, ESM 등 모듈 패턴이 등장하였다.
모듈은 전체 애플리케이션의 일부를 독립된 코드로 분리한 것을 말하며, 이러한 코드를 각각의 파일로 나누어서 관리하는 것을 '모듈화'라고 한다.
이러한 방식을 사용하는 프로그래밍이 '모듈화 프로그래밍'이다.
모듈화 장점
- 기능별 코드를 재사용할 수 있다.
- 코드가 캡슐화되기 때문에 무분별하게 코드가 변경되는 것을 방지할 수 있다.
모듈의 한계
모듈도 마냥 장점만 있는 것이 아니다. 프로그램이 커질수록 세분화된 파일이 많아지므로 각 변수들의 스코프(유효 범위)나 호출 시 발생하는 네트워크 비용에 더 신경써야하는 상황이 발생한다.
번들링 (Bundling)
모듈의 문제점을 보완하기 위해 기능별로 모듈화된 파일을 다시 하나로 묶어주게 된다. 코드를 작성할 때는 모듈화 방식을 사용하므로 기존에 하나의 파일에 모든 코드를 작성하는 방식과는 차이가 있다. 번들링은 빌드 시에 파일이 하나로 묶이게 되기 때문.
번들링 장점
- 각각의 파일로 나뉘어 있을 때는 서버에 리소스 요청도 여러 번 해야 하지만 번들링 하게 되면 묶어서 한 번만 요청하므로 네트워크 비용이 줄어들게 된다.
- 단순히 번들링 하는 역할만 하는 게 아니라 코드 난독화, 용량 압축, 최적화(Tree shaking) 등을 지원하기 때문에 성능 향상, 보안 등에도 도움이 된다.
- ES6 문법을 ES5로 변환해주는 기능이 있다.
번들러 (Bundler)
번들링 기능이 있는 번들러에는 여러 가지가 있지만 대표적으로 웹팩이 있다. 웹팩은 가장 많이 사용되어 지는 번들러이다.
번들러의 주 역할은 서로 연관(의존성) 있는 여러 모듈을 하나의 번들 파일로 묶어주는 것이다.
웹팩은 자바스크립트 파일 뿐만 아니라 모든 형식의 파일을 모듈로 관리한다는 특징이 있다.
Webpack
웹팩은 모듈 번들러이다. 웹팩의 주 목적은 클라이언트에서 자바스크립트 파일을 묶어서 하나의 파일로 사용하기 위함이다.
Webpack 구성 요소
Entry
각 모듈들이 바라보는 최상위 자바스크립트 파일을 정의한다.
웹팩은 엔트리를 통해서 필요한 모듈을 로딩하고 하나의 파일로 묶는다.
Output
번들링 결과물을 어디에 생성하고 네이밍할지 정의한다.
Loader
JS가 아닌 여러 가지 타입의 파일(HTML, CSS, 이미지, 폰트)들을 웹팩이 이해할 수 있도록 해준다. 여기에 더해 ES6 문법을 ES5로 바꾸어주기도 한다. (Babel)
웹팩은 JS만 이해할 수 있기 때문에 이런 과정이 필요한 것이다.
Plugins
번들링 된 결과물에 대해 적용할 수 있는 속성이다. 즉, 결과물의 형태를 바꾸는 역할을 한다.
ex) Uglify bundle(코드 난독화), Minify CSS(css to js파일을 별도의 번들로 분리) 등
+ Mode
웹팩 버전 4부터 Development(개발)과 Production(배포) 두 모드를 정의할 수 있다.
var config = {
entry: './app.js',
//...
};
module.exports = (env, argv) => {
if (argv.mode === 'development') {
config.devtool = 'source-map';
}
if (argv.mode === 'production') {
//...
}
return config;
};