모듈 번들러란? (부제: Webpack vs Vite)

웹팩 쓰려다가 트렌드 모르는 사람 될 뻔

 

 

이번에는 모듈 번들러에 대해서 그리고 대표적인 툴인 Webpack과 Vite에 대해서 써보려고 한다.

 

https://sh-tg.tistory.com/11

React로 프로젝트를 시작 할 때

위의 포스트에도 웹팩, 컴파일러 등에 대해 대략적인 설명이 있지만 해당 포스트에서는 모듈 번들러에 대해서 좀 더 자세히 설명할 예정이다.

 

---

모듈 번들러란?

브라우저를 구성하는 자원으로는 HTML, CSS, Javascript, 정적 자원(이미지) 등이 있다. 웹 애플리케이션이 커지고 복잡해지면서 다양한 리소스들을 효율적으로 관리, 최적화 할 필요성이 생겼고, 모듈 번들러란 이러한 리소스들을 브라우저가 이해할 수 있는 형태로 변환하고 번들링하는 도구이다.

 

*번들러란?

웹 애플리케이션을 개발하기 위해 필요한 HTML, CSS, Javascript 등 모듈화된 자원들을 모아서 최적의 소수 파일로 결합하는 도구이다.결합을 위해 프로젝트를 해석하는 과정에서 불필요한 주석이나 공백 제거, 파일 압축 등 뿐 아니라 최신 문법이나 개발에 편리한 특수 기능 등을 브라우저가 지원하는 형태로 변환하는 작업도 수행 할 수 있다. 즉, 현대의 번들러는 개발자의 작업 효율을 높이고 브라우저의 호환성, 성능을 개선하는데 큰 도움을 준다.

 

모듈 번들러로 많이 사용하는 것은 webpack, vite가 있다. 각각이 무엇이고 어떤 특징을 가지고 있는지 살펴보자.

 

Webpack

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.

 

공식 문서에 따르면 웹팩은 모던 자바스크립트의 정적 모듈 번들러이다. 하나 이상의 entry point에서 의존성 그래프(dependency graph)를 내부적으로 구축한 다음 프로젝트에 필요한 모든 모듈을 하나 이상의 번들로 결합하여 콘텐츠에 정적 자원으로 제공한다.

 

쉽게 말하면 여러 개의 자원(파일)의 의존성을 파악(= dependency graph 만들기)해서 정적 자원으로 제공한다는 것이다.

 

중요한 개념(core concept)으로 Entry, Ouput, Loaders, Plugins, Mode, Browser Compatibilty가 있다고 한다.

 

1. Entry

웹팩이 의존성 그래프를 만드는 entry point(시작점, 진입점)이다. 기본 값은 ./src/index.js이고, webpack.config.js 파일에서 다음과 같이 변경 할 수 있다.

module.exports = {
  entry: './path/to/my/entry/file.js',
};

 

2. Output

번들링 된 결과물을 어떤 이름과 어디에 생성할 지 정할 수 있다. 기본 값은 ./dist/main.js 이고 나머지 파일들은 ./dist 폴더 안에 생긴다. output 역시 webpack.confign.js에서 다음과 같이 변경할 수 있다.

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

 

3. Loaders

웹팩은 기본적으로 Javascript와 Json 파일만 이해할 수 있다. 그래서 Loaders가 다른 형식의 파일을 변환시켜 dependency graph에 추가하거나 애플리케이션에 사용 할 수 있게 해준다.

 

두 가지 속성이 있는데, "test"는 변환이 필요한 파일들을 식별하고 "use"는 변환을 수행하는데 사용되는 loader를 가리킨다.

 

webpack.config.js

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }], // require(), import 문 내에서 '.txt'로 확인되는 경로를 찾으면 번들에 추가하기 전에 'raw-loader'라는 loader를 사용해서 변환 해!
  },
};

 

4. Plugins

번들을 최적화 하거나 환경 변수를 주입하거나 자원을 관리하는 등 작업을 수행 할 수 있다.

 

`require()`를 통해 plugin을 요청하고 `plugins` 배열에 추가해야 한다.

webpack.confign.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 내장 plugin에 접근하는 데 사용

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })], // new 연산자로 plugin 인스턴스 생성
};

 

5. Mode

mode 파라미터를 development, production, none 중에 하나로 설정해서 환경 별로 최적화 할 수 있다. 기본값은 production이다.

 

webpack.config.js

module.exports = {
  mode: 'production',
};

 

6. Browser Compatibility

webpack은 ES5가 호환되는 모든 브라우저를 지원한다. 

 

더 자세한 내용은 공식 문서를 보면 알 수 있다.

 

 

webpack의 경우 공식 문서에서 한국어를 지원하지만 해석이 조금 부자연스러운 면이 있어서 영어와 한국어를 동시에 보는 것이 좋았다.

하지만 vite는 한국어 번역이 더 잘 되어 있어서 편했다.

Vite

Vite(프랑스어로 "빠르다(Quick)"를 의미하며, 발음은 "veet"와 비슷한 /vit/ 입니다.)는 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이며, 두 가지 컨셉을 중심으로 하고 있습니다.
개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공합니다. 가령, Hot Module Replacement (HMR)과 같은 것들 말이죠.번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다. 이는 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공합니다.

 

Vite는 이름 자체가 "빠르다"라는 의미를 가지고 있다. Webpack이나 Rollup 같은 번들러 도구가 세상에 나왔지만 애플리케이션 규모가 점점 커지면서 속도가 느려지곤 했고 (모듈이 수천개에 달하기도 하므로), vite는 이와 같은 문제를 브라우저에서 지원하는 ESModules(ESM)과 네이티브 언어로 작성된 Javascript 도구 등으로 해결했다.

 

개발(dev) 모드에서 애플리케이션을 dependencies와 source code 두 부분으로 나누었을 때 사전 번들링 도구로 Go로 작성된 ESBuild를 사용했다. ESBuild는 기존의 번들러 대비 10-100배 빠른 속도를 제공한다고 한다. 또한 ESM을 이용해서 source code를 제공한다. 브라우저가 번들러 작업의 일부를 하기 때문에 vite는 브라우저가 요청하는 대로 source code를 변환하고 제공하면 된다. 즉, vite는 기존의 번들러 도구와 다르게 번들링 과정을 거치지 않고 ESM을 이용한다. 모듈이 수정되면 vite는 수정된 모듈과 관련 된 부분만 교체하고 브라우저에서 모듈을 요청하면 교체된 모듈을 전달한다.

 

배포(production) 모드에서는 ESBuild를 사용하지 않고 Rollup을 사용한다. 

 

기존 개발 서버와 ESM을 이용하는 개발 서버

 

 

차이점

가장 큰 차이점은 속도 인 것 같다. Vite에서 번들링 속도를 개선하거나 개발 모드에선 아예 번들링을 수행하지 않고 실행하기 때문에 빠른 속도를 제공한다. 두번째는 Vite에서는 다양한 템플릿을 제공하기 때문에 간단하고 최소한의 설정으로 프로젝트를 시작할 수 있다.

 

하지만 Webpack의 등장도 혁신적이었던 것만큼 여전히 Webpack을 사용하는 프로젝트가 있고, 광범위한 플러그인과 로더를 사용해서 커스터마이징 할 수 있다는 장점도 있다.

 

개인적으로 vite가 편리했던건 다양한 템플릿을 제공한다는 점이었다. webpack에서 제공하는 플러그인과 로더를 잘 활용한다면 좋겠지만 그게 아니라면 vite 템플릿으로 프로젝트를 시작하는 것도 좋은 방법인 것 같다.

 

그래서 예전 프로젝트에서는 webpack + babel을 많이 사용했는데 vite로 넘어온 뒤에는 Rust로 개발해 속도를 개선한 SWC를 컴파일러로 많이 사용하게 됐다.

 

---

출처

https://www.heropy.dev/p/x8iedW

번들러와 빌드 도구의 이해

 

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

Concepts | webpack

https://ko.vite.dev/guide/

Vite

 

https://ko.vite.dev/guide/why

Vite