[Javascript] Webpack ? Bundle ?

 

Webpack ? bundle ?

 프론트 작업을 하게되면 필요한 것 들이 여러가지 있습니다. 컴파일이나 트랜스포터 등 화면을 띄우기 위해서는 수많은 작업이 요구됩니다. 만약 이런것들을 수동으로 작업을 해야했다면, 웹 사이트 시장이 절대 이렇게 커질 수 없었을 것입니다.

 Angular 는 Typescript 를 지원하는데, 실행하기 위해서는 javascript 로 변환 후, 프로젝트가 의존하는 모듈들을 로드하는 HTML 파일의 script 태그를 작성해야합니다. 또한 분리되어 있는 Javascript 를 하나의 파일로 모아줘야하는데 이러한 작업을 수작업하게 된다면 수많은 실수와 시간과 노력이 발생할 것입니다.

 이러한 편리성을 제공해준 대표적인 것이, Webpack 입니다. Angular, Vue 등 대표적인 Front Framework 로 작업 시 내장되어 있는 모든 자원(assets)를 번들링 해주는 도구입니다.

여기서 번들링이란?  - 여러개의 파일 중에 종속성이 존재하는 파일을 하나의 파일로 묶어 패키징을 시키는 과정을 의미합니다. 

즉, 번들링이란 각각의 모듈들에 대해 의존성 관계를 파악하여 그룹핑 해주는 것 입니다.

 

 

[Webpack 의 번들링 구조]

 

Webpack 은 다음과 같은 작업의 자동화를 지원합니다.

  - TypeScript 에서 Javascript로의 트랜스파일링
  - 디버깅 용도의 source map 파일 생성
  - 의존 모듈과 HTML, CSS 자바스크립트 번들링
  - AoT 컴파일
  - 코드의 문법 체크
  - 코드의 규약 준수 여부 체크
  - 불필요한 코드의 삭제 및 압축

 

Webpack 을 사용하는 이유 ?

 하지만, 이러한 번들링 및 트랜스파일링을 지원해주는 Application 이 Webpack 만 존재하는 것은 아닙니다. Browsify, Grunt ... 등 여러가지가 존재합니다. 하지만, 성능이나 리소스를 핸들링해주는 기능은 Webpack 이 다른 Applicaton 에 비해 우수함이 인정되고 있기 때문에 주로 사용되고 있습니다. 또한 Grunt, Gulp 는 오로지 리소스들에 대한 툴로 사용되며 dependency graph에 대한 개념이 없습니다.

 

Refernce

• https://steemit.com/javascript/@noreco/webpack
• https://perfectacle.github.io/2016/11/18/Module-bundling-with-Webpck/
• https://nesoy.github.io/articles/2019-02/Webpack