HHyo814
발행일

[ZBF] 7주차 보충 : Webpack, Rollup, TSConfig

기술노트인프라

[ZBF] 7주차 보충 : Webpack, Rollup, TSConfig

이 글은 네이버 블로그에 2024년 6월 30일에 올렸던 것을 그대로 옮겨온 것입니다.

현대 웹 개발에서는 다양한 도구를 사용하여 프로젝트를 빌드하고 최적화합니다. Webpack, Rollup, 그리고 TSConfig는 그중에서도 중요한 역할을 하는 도구들입니다.

Webpack

개요

Webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러입니다. Webpack은 프로젝트의 모든 모듈을 의존성 그래프를 통해 관리하고, 이를 하나 이상의 번들로 결합합니다.

주요 기능

  1. 코드 스플리팅(Code Splitting): 애플리케이션을 여러 번들로 분할하여 로딩 속도를 향상시킵니다.
  2. 로더(Loaders): 다양한 파일 형식을 모듈로 변환하여 번들에 포함할 수 있습니다. 예를 들어, CSS, 이미지, 폰트 파일 등을 로드할 수 있습니다.
  3. 플러그인(Plugins): 번들링 과정을 확장하고 최적화할 수 있습니다. 예를 들어, 번들 압축, 환경 변수 설정 등을 수행할 수 있습니다.
// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    // 플러그인 목록
  ]
};

장점

  • 강력한 생태계와 플러그인 시스템
  • 코드 스플리팅과 트리 쉐이킹 지원
  • 다양한 파일 형식 지원

단점

  • 설정이 복잡할 수 있음
  • 학습 곡선이 있음

Rollup

개요

Rollup은 ES6 모듈을 위한 모듈 번들러로, 간결하고 효율적인 번들링을 제공합니다. Rollup은 특히 라이브러리 제작에 많이 사용되며, 트리 쉐이킹(Tree Shaking) 기능을 통해 불필요한 코드를 제거합니다.

주요 기능

  1. 트리 쉐이킹(Tree Shaking): 사용하지 않는 코드를 제거하여 번들 크기를 최소화합니다.
  2. 플러그인 시스템: 다양한 플러그인을 통해 기능을 확장할 수 있습니다.
  3. ES 모듈 지원: ES 모듈 표준을 중심으로 설계되어 모듈화된 코드를 쉽게 관리할 수 있습니다.
// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    resolve(),
    commonjs()
  ]
};

장점

  • 간결하고 효율적인 설정
  • 트리 쉐이킹 기능으로 최적화된 번들 생성
  • 라이브러리 제작에 최적화

단점

  • Webpack보다 작은 생태계
  • 복잡한 프로젝트에서는 기능이 부족할 수 있음

TSConfig

개요

TSConfig는 TypeScript 컴파일러의 설정 파일입니다. 이 파일은 TypeScript 프로젝트의 컴파일러 옵션을 정의하고, 프로젝트 구조와 관련된 설정을 지정합니다.

주요 기능

  1. 컴파일러 옵션: TypeScript 코드의 컴파일 방식을 설정합니다.
  2. 프로젝트 파일 지정: 컴파일할 파일과 제외할 파일을 지정할 수 있습니다.
  3. 모듈 해석 옵션: 모듈 해석 방식과 경로 매핑을 설정할 수 있습니다.
// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

장점

  • TypeScript 프로젝트의 일관된 설정 관리
  • 강력한 타입 검사 옵션 제공
  • 프로젝트 구조와 관련된 설정을 명확히 정의'

단점

  • 설정 파일의 복잡성
  • 초기 설정에 대한 이해 필요

Webpack, Rollup, TSConfig는 모던 웹 개발에서 중요한 역할을 하는 도구들입니다. Webpack은 다양한 기능과 강력한 플러그인 시스템으로 대규모 애플리케이션에 적합하고, Rollup은 간결한 설정과 트리 쉐이킹 기능으로 라이브러리 제작에 유리합니다. TSConfig는 TypeScript 프로젝트의 컴파일러 옵션과 프로젝트 구조를 정의하여 일관된 개발 환경을 제공합니다. 이러한 도구들을 잘 이해하고 활용하면, 효율적이고 유지보수 가능한 웹 애플리케이션을 개발할 수 있습니다.

← 글 목록으로