본문 바로가기

Dev.World/Tool

JavaScript Module bundler Webpack, 자바스크립트 모듈 번들러 웹팩

등장배경
Javascript가 많은 곳에서 쓰이게 되면서 모듈화의 필요성 증대되었다.
범용적인 목적으로 JavaScript를 사용하기 위해 필요한 선결 조건은 모듈화이다.
모듈화는 세 부분으로 이루어진다.

스코프(Scope)
모든 모듈은 자신만의 독립적인 실행 영역이 있어야 한다.
자바스크립트의 언어적인 특성상 전역변수와 지역변수를 분리하는 것이 매우 중요하다.

정의(Definition)
모듈 정의는 exports 객체를 이용한다.

사용(Usage)
모듈 사용은 require 함수를 이용한다.

브라우저에는 모듈화를 지원하기 위해
Common JS or AMD(Asynchronous Module Definition)의 스펙을 구현한 많은 라이브러리가 있다.
그 중 대표적으로 널리 쓰이는 것이 Require JS 이다.
Require JS는 모듈 로더로,
<script>태그 없이도 AMD 스타일의 모듈을 구현한 스크립트를
동적으로 로드할 수 있도록 하는 라이브러리이다.


Webpack 이란 무엇인가? ( What )
webpack 이란 모듈 번들러로, 의존성을 가진 모듈들을 다루고,
그 모듈로부터 정적인 asset을 생성한다.

왜 사용해야 하는가? (Why)
webpack의 기능으로부터 사용해야 하는 이유가 도출된다.
큰 파일을 서로간의 종속성을 갖는 여러 작은 모듈로 쪼갤 수 있게 하고,
해싱을 이용해 장기적인 캐싱을 통한 성능 향상을 도우며
CSS 전처리기나 compile-to-js 파일들(CoffeScript or TypeScript etc…)의 컴파일에도 사용할 수 있고,
핫 리로딩을 지원하는 등 정적 에셋 관리 전반적인 프로세스에 큰 도움이 된다.
babel-loader 도 제공하여 최신 ECMA Script 스펙이 구현되지 않은 브라우저에도 지원을 할 수가 있다.
이 이외에도 webpack의 의 기능은 정말 많다.


어떻게 사용해야 하는가? (How)
webpack 공식 Gitgub

Naver D2 기술 블로그 JavaScript 모듈화 도구, Webpack

webpack 이란 무엇인가

webpack을 어디에 사용할 수 있는가

webpack 시작하기
webpack tutorial A

webpack tutorial B