Bundler
의존성으로 연결된 수 많은 파일을 하나의 큰 파일로 결합해준다. JS 파일 뿐만 아니라 third-party의 의존성까지 하나의 파일로 묶어준다.
Why Bundler?
왜 번들러를 사용해야 될까? 우선 번들러가 사용되기 전의 상황을 살펴보자
<head>
<script src="./function_1.js"></script>
<script src="./function_2.js"></script>
<script src="./function_3.js"></script>
<script src="./function_4.js"></script>
</head>- 웹의 규모가 커지면서 다수의 Script를 불러오게 되었다.
<script>태그가 여러 개 존재하여 그 개수만큼 네트워크 요청이 발생하여 네트워크의 병목현상을 일으켰다. - 여러개의 Script가 있어도 이것들은 모두 하나의 Global Scope안에 속하게 된다. 따라서 변수명등 식별자 이름이 중복되는 현상(name collisions)이 발생하여 개발자를 곤혹스럽게 했다. 수 많은 스크립트의 변수명을 유니크하게 한다는 것은 어려운 일이기 때문이다.
물론 식별자 중복 문제는 JS의 Module을 이용해서 해결할 수 있었다. Module로 분리되면 각각의 스크립트는 다른 Scope를 가지기 때문이다. 실제로 Bundler는 네트워크의 병목현상을 해결하기 위해 나타났다.
Why Webpack ?
Benfit of using Webpack
Webpack은 module bundler다. Webpack은 여러 스크립트를 하나의 파일로 묶어준다. 따라서 최소한의 <script>태그만 작성하면 되기 때문에 네트워크 병목 현상을 해결 할 수 있다. 또한, 각각의 파일을 Module로써 처리하여 식별자 중복 문제 또한 해결이 가능하다.
- 처음 webpack이 나올 당시에는 JS 자체의 모듈 시스템이 없다고 한다. 그래서 Webpack이 각광을 받았나 싶다..(추측)
정리하자면, Webpack의 장점은 다음과 같습니다.
1. 네트워크 요청을 최소화하여 병목 현상 해결
2. 모듈 시스템을 적극 이용
3. 코드 압축
4. 핫 리로드 제공
5. Babel 등을 로더 시스템을 이용하여 사용, Third-party들도 하나의 번들로 묶을 수 있다.
위에 작성된 내용 이외에도 수많은 장점 때문에, Webpack은 Wep 개발을 간단하고 안정적으로 만들어 줍니다.
Another Bundlers (추측)
세상에는 Webpack 이외의 다양한 Module Bundler가 존재한다. Snowpack, Parcel, Rollup 등이 있다. 이외에 Webpack과 자주 비교되는 것으로 Gulp와 Grunt가 있다.
아직 저는 Webpack만 사용해봤기 때문에, 각각 Module Bundler의 차이점을 알지 못합니다. 자료도 쉽게 찾아 볼 수 없었습니다. 따라서 하기된 내용들은 100% fact가 아니라 뇌피셜이라는 점..
아래부턴 추측.. 개인적인 생각
-
Gulp, Grunt VS Webpack
Gulp와 Grunt는Task Runner라는 이름으로 불립니다. Webpack은Module Bundler죠. Gulp와 Grunt 또한 Webpack처럼 압축이 가능하다고 알게되었는데, Gulp와 Grunt의 주요한 목적은 테스트 자동화인 것 같습니다. 우리는 jest와 같은 라이브러리를 이용해서 테스트를 작성할 수 있는데, 이런 테스트를 동작하고 빌드까지 시키는 작업을 Gulp와 같은 Task Runner로 자동화시킬 수 있는 것 같습니다. -
Parcel VS Webpack
최근 주목받고 있는 Module Bundler인 Parcel입니다. Parcel은zero-config특징을 가지고 있습니다. Webpack config 파일을 작성하는데에는 엄청난 공부시간이 필요합니다.(개인적으로) 반면에 Parcel은 loader들이나 config 옵션에 대한 설정 없이 알아서 해준다고 합니다. 러닝커브가 낮아서 좋다는 점이 있겠네요. 또한 Parcel은 entry point를 꼭 JS파일로 할 필요도 없다고 합니다. 더불어 Build 속도도 엄청 빠르다고 합니다.
그렇다면 이제 Parcel을 사용해야 될 것 같은데, 아직도 많은 프로젝트는 Webpack으로 build되고 있습니다. Webpack안정성때문인데, 따라서 개인프로젝트 할 때 번거로운 Webpack Config작업을 피하려면 Parcel을 쓰고 서비스가 필요한 대규모 프로젝트에서는 Webpack을 쓰는 것이 맞는 것 같습니다. Parcel이 좀 더 업그레이드 된다면 Parcel이 Budler 대장이 될 수 있을 것 같네요.
