TypeScript, Babel, Webpack 함께 사용하기

Webpack

webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러 이다.

모듈 번들러란?

모듈 번들러(Module Bundler)는 웹 애플리케이션을 구성하는 여러 개의 파일과 의존성을 관리하여, 이를 하나 또는 여러 개의 결과물로 출력하는 도구입니다. 주로 자바스크립트를 중심으로 작동하며, CSS, 이미지, 폰트 등의 다양한 자원도 처리할 수 있습니다.

주요 작업

1. 파일 병합: 여러 개의 자바스크립트 파일을 하나의 파일로 합칩니다. 이로 인해 브라우저가 다수의 파일을 요청하는 대신 한 번의 요청으로 필요한 모든 자바스크립트를 로드할 수 있습니다.
2. 의존성 관리: 특정 모듈이 다른 모듈에 의존하는 경우, 의존성을 해결하여 올바른 순서로 코드를 병합합니다.
3. 코드 최적화: 불필요한 코드를 제거하거나, 코드를 압축하여 최종 결과물의 크기를 줄입니다.
4. 환경 설정: 개발 모드와 프로덕션 모드 등, 다양한 환경에 맞는 설정을 적용할 수 있습니다.
5. 파일 변환: CSS 전처리기, 이미지 최적화, Babel을 통한 자바스크립트 변환 등 다양한 파일 형식을 웹에서 직접 사용할 수 있도록 변환합니다.

대표적인 모듈 번들러

• Webpack: 현재 가장 널리 사용되는 모듈 번들러입니다. 풍부한 플러그인과 로더 지원, 세세한 설정이 가능합니다.
• Rollup: 라이브러리와 프레임워크에 주로 사용됩니다. 트리 쉐이킹 등의 최적화 기능이 뛰어납니다.
• Parcel: 설정 없는 제로 컨피그(Zero Configuration) 모듈 번들러로, 초보자에게 쉽게 접근할 수 있습니다.

모듈 번들러를 사용하면 코드의 재사용성, 유지 보수성, 최적화 등 여러 면에서 이점을 볼 수 있습니다.

 

---

Gulp랑 차이는?

Gulp

Gulp는 자동화 도구로써, 빌드 과정, 파일 변환, 리소스 최적화 등을 자동으로 수행할 수 있습니다. Gulp는 JavaScript로 작성된 task를 실행하여 파일을 처리합니다. 이는 CSS 전처리기 컴파일, 이미지 최적화, JavaScript 코드 연결 및 압축 등에 사용될 수 있습니다.

Webpack

Webpack은 모듈 번들러입니다. 즉, 여러 개의 파일과 모듈을 하나 또는 여러 개의 파일로 번들링하는 도구입니다. 또한, JavaScript 코드에서 CSS, 이미지, 폰트 등을 직접 import 할 수 있게 해주며, 여러 개의 파일을 하나로 묶어 성능 최적화를 할 수 있습니다.

차이점

1. 목적:
   • Gulp는 일반적인 빌드 자동화 작업을 위한 도구입니다.
   • Webpack은 주로 모듈 번들링에 중점을 둡니다.
2. 설정:
   • Gulp는 JavaScript로 작성된 명시적인 task를 통해 작업을 수행합니다.
   • Webpack은 선언적인 설정 파일을 통해 모듈을 해석하고 번들링합니다.
3. 추가 기능:
   • Gulp는 다양한 플러그인을 통해 여러 작업을 수행할 수 있습니다.
   • Webpack은 로더와 플러그인을 통해 다양한 리소스를 처리하고, 최적화 작업까지 수행합니다.
4. learnin culve:
   • Gulp는 작업이 명시적이므로 초기에 이해하기 쉽습니다.
   • Webpack은 설정이 복잡할 수 있으며, 학습 곡선이 더 높을 수 있습니다.
5. 최신 프레임워크와의 호환성:
   • Webpack은 React, Angular, Vue 등과 같은 현대적인 프론트엔드 프레임워크와 잘 호환됩니다.
   • Gulp는 자동화 작업이 주된 목적이므로 프레임워크와의 직접적인 호환성은 없습니다. 하지만 프레임워크와 함께 사용될 수 있습니다.
6. Hot Module Replacement (HMR):
   • Webpack은 HMR을 지원하여 실시간으로 코드 변경을 반영할 수 있습니다.
   • Gulp는 기본적으로 HMR을 지원하지 않습니다.

두 도구는 서로 보완적인 성격이 있어, 함께 사용되기도 합니다. 예를 들어, Webpack으로 JavaScript 파일을 번들링하고, Gulp로 CSS 전처리, 이미지 최적화 등의 작업을 수행할 수 있습니다.

 

---

Webpack 장점들

1. 코드 분할(Code Splitting): 라이브러리, 앱 로직, 스타일 등을 별도의 번들로 분할할 수 있어 로딩 시간을 최적화할 수 있습니다.
2. 트리 쉐이킹(Tree Shaking): 사용하지 않는 코드를 자동으로 제거해 최종 번들의 크기를 줄일 수 있습니다.
3. 모듈화(Module Bundling): JavaScript뿐만 아니라 이미지, 스타일, HTML 등 다양한 파일을 모듈로 처리할 수 있습니다.
4. 빠른 개발 환경: Hot Module Replacement(HMR) 같은 기능을 통해 코드 변경시 자동으로 브라우저를 업데이트 할 수 있습니다.
5. 환경별 설정: 개발 환경과 프로덕션 환경에 따라 다르게 설정을 할 수 있습니다.
6. 플러그인 시스템: 다양한 플러그인을 통해 웹팩의 기능을 확장할 수 있습니다.
7. 성능 최적화: 로더와 플러그인을 통해 이미지 최적화, CSS Minification 등 다양한 성능 최적화가 가능합니다.
8. 코드 분석: 번들의 사이즈, 의존성 등을 시각적으로 분석할 수 있는 도구가 있습니다.
9. 크로스 브라우저 호환성: Babel과 같은 도구를 연동하여 크로스 브라우저 호환성을 보장할 수 있습니다.
10. 사용자 경험 개선: Lazy-loading, Prefetching 등을 쉽게 구현하여 사용자 경험을 개선할 수 있습니다.

제일 핵심 기능인 번들링으로 서버와의 통신 리소스를 줄인다는점만 생각해도, 서버 비용을 생각할 개발자로서 반드시 알아둬야 할 기능이라 생각 들었습니다.

또, 서비스를 제공할 개발자로서 Babel 또한 여러 브라우저의 호환성을 고려해, 개발의 편의성을 도와 당연히 사용해야할 기술 중 하나로 느꼈습니다.

더 나아가 Typescript도 빼놓을 수 없이 정적 타입체크를 통해 개발 안정성과, abstract, readonly와 같은 타입스크립트 만의 문법으로 정교한 개발을 도와줄 필수적인 도구라고 생각 들었습니다.

일전에 Typescript의 자체적인 es버전에 맞는 컴파일러가 있지만, Babel의 이점과 더불어 더 빠른 컴파일링 기능을 더할 수 있는 두 기술의 조합에 대해서는 공부한적 있습니다.
블로그 정리내용 # TypeScript & Babel 의 조화

그럼, TypeScript, Babel, Webpack을 모두 함께 사용하는 방법에 대한 고민들이 생겼다.

 

---

TypeScript, Babel, Webpack을 모두 함께 사용하는 방법

1. Typescript를 컴파일 하는방법
   1. tsc
   2. ts-loader (webpack)
   3. babel
2. Webpack이 번들링 하는 방법
   1. 컴파일 된 js파일이 있을 경우
      1. 일반적 번들링 (이미 babel로 컴파일 했어야 babel도 사용 가능)
      2. babel-loader
   2. ts파일로 하는경우
      1. ts-loader
      2. babel-loader

내가 정리하기로는 이정도로 가짓수가 정리된다.

이런 방법들을 선택하면서도, webpack이 개발에 직접적인 도움을 줄 수 있는 Hot Module Replacement(HMR) live-server같은 기능을 통해 코드 변경시 자동으로 브라우저를 업데이트 할 수 있는기능을 활용 할 수 있는 방법은 아래와 같이 정리되었다.

1. tsc -w => nodemon babel => webpack devserver
   ts -(tsc)> js -(bable)> js -(webpack)> bundle
2. nodemon babel => webpack devserver
   ts -(js)> js -(webpack)> bundle
3. webpack
   ts -(js)> js -(webpack)> bundle

이런식으로 정리된다.

Babel-loader

babel-loader는 Webpack의 로더 중 하나로, JavaScript 파일을 Babel을 통해 변환해주는 역할을 합니다. 이 로더는 Webpack이 파일을 번들링하기 전에 실행되며, ES6 이상의 문법이나 JSX, TypeScript 등을 이전 버전의 JavaScript 또는 브라우저 호환 코드로 변환할 수 있다.

사용 방법

1. 패키지 설치
2. npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env
3. Webpack 설정 파일 (webpack.config.js)
4. module.exports = { entry: './src/index.js', module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader', }, ], }, output: { filename: 'bundle.js', path: __dirname + '/dist', }, };
5. Babel 설정 파일 (babel.config.json 또는 .babelrc)
6. { "presets": ["@babel/preset-env"] }

babel-loader를 TypeScript와 함께 사용

babel-loader는 TypeScript 파일도 변환할 수 있습니다. 이를 위해서는 @babel/preset-typescript를 설치하고 Babel 설정에 추가하면 됩니다.

1. 패키지 설치
2. npm install --save-dev @babel/preset-typescript
3. Babel 설정 파일에 TypeScript 프리셋 추가
4. { "presets": ["@babel/preset-env", "@babel/preset-typescript"] }

이렇게 설정하면 babel-loader를 활용해 TypeScript 코드도 변환할 수 있다.