[리액트]Webpack 웹팩 이해하기(1)

Webpack 등장배경

웹 서비스 개발에서 JavaScript로 작성하는 코드의 양도 늘어나고 있는데, 많은 Javascript 파일을 하나의 파일로 관리하기엔 어렵다. 다음과 같은 문제점이 발생한다.

• 높은 네트워크 비용 + 네트워크 병목현상으로 느린 속도; 브라우저에서 여러 개 파일을 로딩하는 비용이 크다.

• 변수 충돌 위험성; 여러 개 파일을 로딩했을 때, 각 파일은 서로의 스코프를 침범할 수 있다.

코드의 유지와 보수가 쉽도록 코드를 모듈로 나누어 관리할 수 있는 시스템이 필요해진다. JavaScript는 언어 자체가 지원하는 모듈 시스템이 없다.

IIFE(즉시호출함수)를 사용하여 파일별로 Javascript 모듈화를 명세할 수 있다.

• CommonJS

• AMD(Asynchronous Module Definition)

IIFE 스타일로 모듈화한 과정만으로 파일 단위 시스템을 사용하는 것은 쉽지 않다. 모듈화 한 것을 하나의 파일로 묶는 것이 필요하다. 이를 해소할 수 있는 Webpack이 등장했다.

Webpack 정의

Javascript 애플리케이션의 Static Module Bundler

Webpack은 Dependencies Graph를 통해 하나 또는 여러 개의 Bundle이 생성된다.

• 지정한 파일에서 시작
• Javascript의 require(CommonJS 모듈 지원)과 import(ES6)을 참고하여 프로젝트의 모든 의존성을 조사
• Loader를 이용해서 처리
• 하나의 Javascripit Bundle을 생성

Bundle 이란
각 모듈에 대해 의존성 관계를 파악하여 하나 또는 여러 개의 그룹

Bundler 란
의존성이 있는 모듈을 하나 또는 여러 개의 파일로 합쳐준다.
이외 Bundler
- Browsify: Webpack과 유사하지만, 속도가 Webpack보다 느리다
- Grunt, Gulp: Dependency Graph에 대한 개념이 없다. 리소스들을 위한 툴로 사용된다.

 

Webpack 장점

• 편리한 모듈 의존성 관리

• Loader를 이용하여 다양한 리소스 활용

• 빠른 컴파일 속도

Webpack이 비동기 I/O와 다중 캐시 레벨을 사용하기 때문에 컴파일 속도가 매우 빠르다.