웹팩(Webpack)이란?

최근 몇 년동안 웹 개발은 매우 작은 리소스들과 약간의 자바스크립트가 포함된 웹페이지를 시작으로, 복잡한 자바스크립트와 대규모 의존성 트리를 가지고 있는 다양한 기능을 갖춘 웹 애플리케이션으로 발전했다.

이러한 복잡성에 대응하기 위해 아래와 같은 방법을 고안했다.

한 프로그램으로 작동하는 하나의 파일을 여러 파일로 분할하고 구성할 수 있는 자바스크립트 모듈
향후 자바스크립트에서 제공될 기능을 미리 이용할 수 있게 해주는 자바스크립트 전처리기(pre-processor)와 자바스크립트로 컴파일되는 언어 (ex. CoffeeScript, TypeScript)

이러한 방법은 아주 유용하지만 있다 파일을 브라우저가 이해할 수 있도록 번들로 묶고 변환(트랜스파일 및 컴파일)하는 이전에는 없던 추가 단계를 거쳐야 이용이 가능하다.

이 때문에 웹팩과 같은 도구가 필요해졌다.

웹팩은 프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 찾은 다음 이를 브라우저에서 이용할 수 있는 번들로 묶고 패킹하는 모듈 번들러(Module bundler)다.

그런트(Grunt)나 걸프(Gulp)와 같은 빌드 도구와의 차이점

Grunt와 Gulp는 사람의 실수나 반복적인 작업을 줄이기 위한 자동화 툴(Task Runner)

Grunt와 Gulp와 같은 자동화 도구 덕분에 많은 작업량이 줄었는데도 불구하고 Webpack이 등장

Grunt와 Gulp에서 어떤 것들이 불편해서 등장했나 ?

1:1로 대체된다기 보다는 보다 이 기능이 포함되어 있으며 더 많은 기능을 제공하기 때문이다.

Node.js 기반 javascript code를 브라우저 환경에서도 실행 가능하도록 해줌

하지만 브라우저에서 작업 결과를 봐야 하기 때문에 매번 코드를 컴파일해야하는데, 코드의 양이 많아지면 하나 수정하는데에도 시간이 엄청 오래걸릴 수 있다.

Polyfill - 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 말한다.
- HTML5 및 CSS3와 오래된 브라우저 사이의 간격을 메꾸는 역할을 담당
Babel - Javascript 컴파일러로써 ES6 이후 코드를 구형 브라우저 환경에 맞게 변환해주는데 주로 사용
- regenerator runtime과 core-js를 포함하는 polyfill을 포함 (Babel이 Polyfill보다 큰 개념처럼 이해할 수 있다)