웹팩은 프론트엔드 프로젝트에서 코드 번들링을하는 데 사용되는 매우 인기있는 도구입니다. 타입스크립트는 정적 타입 검사를 할 수 있는 자바스크립트의 상위 집합 언어입니다. 타입스크립트로 작성된 코드를 웹팩으로 번들링하고 디버깅할 때 몇 가지 구성이 필요합니다. 이 블로그 포스트에서는 웹팩을 사용하여 타입스크립트와 디버깅을 연동하는 방법에 대해 알아보겠습니다.

1. 타입스크립트와 웹팩 설정

먼저 프로젝트 폴더에서 다음 명령을 사용하여 타입스크립트와 웹팩을 설치합니다.

npm install typescript webpack webpack-cli ts-loader --save-dev

웹팩 구성 파일(webpack.config.js)을 만들고 다음과 같이 설정합니다.

const path = require('path');

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

2. 디버깅 구성

웹팩 설정에 devtool 속성을 사용하여 소스 맵을 생성하도록 했습니다. 이렇게 하면 디버깅할 때 타입스크립트 원본 파일(.ts)이 아닌 소스 맵 파일(.js.map)도 사용할 수 있습니다. 개발자 도구에서 디버깅할 때 타입스크립트로 작성된 코드를 보게 됩니다.

3. 디버깅

웹팩으로 빌드한 프로젝트를 실행하고 브라우저의 개발자 도구를 열어 디버깅할 수 있습니다. 원하는 곳에 중단점을 설정하여 타입스크립트 코드를 한 줄씩 디버깅할 수 있습니다.

위의 방법을 따라 타입스크립트와 웹팩을 설정하고 디버깅을 연동하면 효율적으로 프런트엔드 프로젝트를 관리할 수 있습니다.

이상으로 타입스크립트와 웹팩을 이용하여 디버깅하는 방법에 대해 알아보았습니다.

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