자바스크립트에서 Webpack을 쓰는 이유

천덕꾸러기 취급을 받던 자바스크립트는 이제 대세 개발 언어가 되었다. 많은 사람들이 자바스크립트 개발을 하고 있으며, 해커랭크 인기 언어 순위에서도 자바(Java)를 제치고 당당히 1위에 올라섰다. 자바스크립트는 그동안 엄청난 변화를 겪어왔다. 그러면서 최근 자바스크립트 개발에서는 수많은 의존성을 갖는 라이브러리들을 사용해야 한다. 

점차 복잡해지는 모던 자바스크립트 개발을 위해서는 각각의 의존성을 관리해주는 도구가 필요하다. 오늘은 그 중에서 대표적인 자바스크립트 번들러인 Webpack에 대해 알아보고 모던 자바스크립트 개발에서 Webpack을 써야 하는 이유를 살펴보도록 하자.

1. ECMAScript 버전과 브라우저

ECMAScript는 ECMA 인터네셔널에의 TC39에서 제정하는 표준이다. 자바스크립트는 이 표준을 따르고 있으며, 각 브라우저 제조사도 이 표준에 맞게 브라우저를 만든다. 

그런데 자바스크립트는 2015년 ECMAScript 6 (=ES6) 명세가 나오면서 문법적으로 큰 변화가 있었다. 그 중에 가장 큰 특징은 모듈화 문법일 것이다. 다른 언어에서 import, export 와 같이 쓰던 기능이다. 

하지만 아직 기존 인터넷 익스플로러 같이 ES6를 제대로 지원하지 않는 브라우저들이 있다. 자바스크립트 개발을 할 때 ES6 이 후 문법을 사용해서 조금 더 모듈화 되고 발전된 코드를 짜도 이를 제대로 해석하지 못하는 브라우저가 있는 것이다. 

2. 트랜스 파일러 (Transpiler)

최신 자바스크립트 문법을 구형 브라우저에서도 제대로 동작하도록 하려면 트랜스 파일러가 필요하다. 트랜스 파일러란 간단하게 얘기해서 ES6 이 후 자바스크립트 문법을 ES5 문법으로 변환하는 도구인 것이다. 

대표적인 Transfiler로는 Bable, traceur, core-js가 있다. Typescript를 사용한다면 이 역시 트랜스 파일러 역할을 한다. 이 중에서 최근에는 Babel이 가장 많이 사용되고 있다. 

3. 모듈 API 명세와 라이브러리

앞서 얘기한 ES6의 대표적인 문법 중에 모듈화 문법들이 있다. 그런데 이에 대한 구체적인 구현 방법에는 여러가지가 있다. 대표적으로 CommonJS, AMD, UMD, ES6 Module이 있다. 그리고 각 모듈 API 명세를 지원해주는 Require.js(AMD용) 같은 라이브러리가 있다. 

4. 번들러 도구

모던 자바스크립트 개발을 하면 필연적으로 자바스크립트 코드, CSS 코드 등의 asset 압축과 ES6 이 후 문법에 대한 트랜스 파일, 모듈 지원을 위한 모듈 라이브러리 로드 작업이 필요하다. 이런 작업을 한 번에 할 수 있게 해주는 도구가 바로 번들러 도구이다. 대표적인 번들러 도구로는 Browserify와 webpack이 있으나 최근에는 거의 webpack으로 대세가 기울고 있다.

5. Webpack의 장점

웹팩(Webpack)은 이제 모던 자바스크립트 개발에 있어 필수적인 도구이다. webpack은 기본적으로 모듈을 지원하는 모듈 로더이다. 앞서 얘기했듯이 모듈 명세에는 CommonJS와 AMD 등이 다양하게 있는데 webpack은 이들을 모두 지원한다. 또한 파일 분할 기능이 있어 원하는 코드만 따로 분리해서 하나의 파일로 압축할 수 있다. 

이 밖에도 webpack은 모듈 뿐 만 아니라 CSS loader 기능도 하며, React에서 사용되는 jsx 변환 작업도 해준다. 말 그대로 모던 자바스크립트 개발을 할 때 번거로운 작업들을 한꺼번에 할 수 있도록 지원해준다는 장점이 있다. 따라서 구식 자바스크립트 개발이 아닌 현대적인 자바스크립트 개발을 하는 사람이라면 webpack을 사용하지 않을 이유가 없다.