[typescript] 웹팩으로 타입스크립트 프로젝트 최적화하기

11 Dec 2023

typescript

웹팩은 모듈 번들러로, 타입스크립트 프로젝트를 빌드하고 번들링하는 데 매우 유용합니다. 코드를 최적화하여 성능을 향상시키고 더 작은 번들 파일을 생성하는 과정은 중요합니다. 이번 글에서는 웹팩을 사용하여 타입스크립트 프로젝트를 최적화하는 방법에 대해 알아보겠습니다.

웹팩 설정 파일 생성

타입스크립트 프로젝트를 최적화하기 위해 먼저 웹팩 설정 파일을 생성해야 합니다. webpack.config.js 파일을 프로젝트 루트에 생성하고 필요한 로더 및 플러그인을 설정합니다.

// webpack.config.js

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
};

로더 설정

타입스크립트 파일을 웹팩에서 사용하기 위해 ts-loader를 설치하고 설정해야 합니다.

npm install ts-loader --save-dev

웹팩 설정 파일에 ts-loader를 추가합니다.

// webpack.config.js
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
};

코드 최적화

타입스크립트 코드를 최적화하기 위해 웹팩 플러그인을 사용할 수 있습니다. 예를 들어, TerserPlugin 플러그인을 사용하여 코드를 압축할 수 있습니다.

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  //...
  optimization: {
    minimizer: [new TerserPlugin()],
  },
};

번들 파일 최적화

번들 파일의 크기를 최적화하기 위해 웹팩을 활용할 수 있습니다. 코드 스플리팅, 트리 쉐이킹, 압축 등의 기능을 활용하여 번들 파일의 크기를 줄일 수 있습니다.

마무리

웹팩과 타입스크립트를 함께 사용하여 프로젝트를 최적화하는 방법에 대해 알아보았습니다. 코드 최적화와 번들 파일 최적화를 통해 프로젝트의 성능을 향상시킬 수 있습니다. 웹팩의 다양한 기능을 적절히 활용하여 프로젝트를 최적화하는데 도움이 될 것입니다.

참고: 웹팩 공식 문서, 타입스크립트 공식 문서

목차

웹팩 설정 파일 생성

로더 설정

코드 최적화

번들 파일 최적화

마무리