웹팩은 모듈 번들링 도구로, 타입스크립트와 코드 분할을 연동하여 애플리케이션을 효과적으로 관리할 수 있습니다. 이번 포스트에서는 웹팩을 사용하여 타입스크립트를 번들링하고, 코드를 분할하는 방법을 알아보겠습니다.

타입스크립트 웹팩 설정

먼저, 타입스크립트 웹팩 설정을 위해 tsconfig.json 파일을 생성하고 기본적인 타입스크립트 설정을 추가합니다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true
  }
}

그리고 웹팩 설정 파일 webpack.config.js을 생성하여 타입스크립트 파일을 번들링합니다.

const path = require('path');

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

코드 분할

웹팩 4 이상 버전에서는 dynamic import를 사용하여 코드를 분할할 수 있습니다. 아래는 dynamic import를 이용한 코드 분할 예제입니다.

// app.ts
const button = document.getElementById('loadBtn');
button.addEventListener('click', async () => {
  const module = await import('./module');
  module.doSomething();
});

위 코드는 click 이벤트가 발생했을 때, module.ts 파일을 동적으로 로드하여 실행하는 예제입니다.

결론

웹팩을 통해 타입스크립트 파일을 번들링하고 코드를 효율적으로 분할하는 방법에 대해 살펴보았습니다. 타입스크립트와 웹팩을 효과적으로 활용하여 애플리케이션의 성능을 향상시킬 수 있습니다.