왜 웹팩을 사용해야할까요?

이 포스팅은 아래의 사이트를 번역한 글입니다.(오역과 개인의 생각 또한 포함되어 있습니다.)

 

https://webpack.js.org/concepts/why-webpack/

Why webpack | webpack

 

왜 웹팩일까요?

웹팩의 사용이유에 대해 이해하기 위해서 번들러가 유행하기 전에 자바스크립트를 웹에서 어떻게 사용하였는지 알아봅시다

브라우저에서 자바스크립트를 실행하기 위한 두가지 방법이 있습니다. 첫번째는 각 기능별로 script를 포함시키는 것입니다. 이 해결책은 확장성이 떨어지는데 너무 많은 script들을 불러오는 것은 네트워크 병목 현상을 가져올 수 있습니다. 

두번째 옵션은 모든 프로젝트 코드를 포함한 거대한 .js 파일을 사용하는 것입니다. 그러나 이것은 범위(변수의 범위를 뜻하는 듯), 크기, 가독성, 유지보수에 문제를 일으킬 수 있습니다.

IIFEs - 즉시 실행 함수들

IIFEs는 거대한 프로젝트에서 범위 문제를 해결하였습니다. script 파일이 IIFE로 감싸여저 있으면 범위가 충돌할 걱정 없이 파일들을 안전하게 합치거나 연결시킬수 있습니다. 

IIFE의 사용은 Make, Gulp, Grunt, Broccoli 혹은 Brunch와 같은 도구들을 등장시켰습니다. 이러한 도구들은 task runner들로 알려져 있으며 모든 프로젝트 파일들을 연결시킵니다.

그러나 파일하나의 변경은 전체를 다시 빌드해야하는 것을 의미합니다. 연결성은 파일간에 script들의 재사용을 쉽게 하였지만 빌드 최적화는 어렵게 만들었습니다. 코드가 실제가 사용되는지 아닌지를 어떻게 알수 있을까요?

lodash로 부터 단지 하나의 함수만 사용할지라도 전체 라이브러리를 추가하고 함께 압축해야 합니다. 코드에서의 의존성을 어떻게 treeshake 할 수 있을까요? 코드 덩어리를 lazy loading 하는 것은 확장성을 떨어뜨리고 개발자의 적지않은 수작업을 요구합니다

Node.js 덕분에 등장한 Javascript Modules의 탄생

Webpack은 브라우저 환경이 아닌 서버와 컴퓨터에서 사용될수 있는 javascript runtime인 Node.js에서 동작합니다. 

Node.js가 등장하고 새로운 시대가 시작되었고 새로운 도전 또한 다가왔습니다. Javascript가 브라우저에서 동작하지 않는데 어떻게 Node application 들은 새로운 코드들을 불러올까요? 추가할수 있는 html 파일들과 script 태그들은 없습니다.

CommonJs가 등장하였고 현재 파일에서 다른 모듈을 불러오고 사용할 수 있는 require을 소개하였습니다. 이것은 필요할때마다 각각의 모듈을 불러옴으로써 범위 이슈를 해결하였습니다.

npm + Node.js + modules – mass distribution 

Javascirpt는 언어, 플랫폼으로서 그리고 빠르게 application들을 만들고 발전시키는 방법으로 세계를 장악하고 있습니다.

그러나 CommonJs를 지원하는 브라우저는 없습니다. live binding은 없습니다. 순환 참조에서 문제들이 있고 동기적인 모듈의 사용과 로딩은 느립니다. 반면 CommonJs는 Nodejs 프로젝트들에서 훌륭한 해결책이 되었습니다. 브라우저들은 module을 지원하지 않았고 그래서 브라우저에서 CommonJs module을 사용할수 있게 해주는 Browserify, RequireJs, SystemJs와 같은 번들러와 도구들이 생겨났습니다.

ESM - ECMAScript Modules

웹 프로젝트들에게 좋은 소식은 모듈이 ECMAScript의 표준으로 체택이 되었다는 것입니다.

그러나 브라우저에서의 지원은 아직 불완전 하고 bundling는 초기 모듈 구현보다 여전히 빠르고 현재 추천되고 있습니다. 

Automatic Dependency Collection 

오래된 Task Runner들과 구글의 Closure Compiler는 모든 의존성을 미리 수동으로 선언해주어야 합니다. 반면 웹팩과 같은 bundler들은 자동으로 build해주고 import되고 export되는 것을 기반으로 의존성 그래프를 추론해줍니다.

Wouldn't it be nice…

모듈을 작성할 수 있을 뿐만 아니라 어떠한 모듈 형식과 resource들과 asset들을 동시에 다뤄야 할까요??

이것이 웹팩의 존재 이유 입니다. 이것은 Javascript 어플리케이션들(ESM과 CommonJs를 지원하는)을 묶을수 있게해주는 도구 이며, 이미지, font, stylesheet들을 지원하도록 확장할 수 있습니다.

웹팩은 성능과 load 시간을 고려합니다. 비동기 chunk 로딩과 미리 가져오는것과 같이 사용자와 프로젝트를 위한 최고의 긍정적 경험을 제공하기 위해 항상 새로운 기능을 추가하거나 개선합니다.