웹팩(Webpack)은 자바스크립트 및 기타 파일을 번들링하여 소스맵(Source Map)을 통해 디버깅이 용이하고, 효율적인 모듈 번들링을 지원하는 도구이며, 타입스크립트(TypeScript)와의 연동도 간편하게 할 수 있습니다. 이번 포스트에서는 웹팩으로 타입스크립트와 소스맵을 생성하고 연동하는 방법에 대해 알아보겠습니다.

1. 타입스크립트 및 웹팩 설치

먼저, 프로젝트에 타입스크립트와 웹팩을 설치합니다.

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

2. 타입스크립트 설정

프로젝트 루트 디렉토리에 tsconfig.json 파일을 생성하고 아래와 같이 설정합니다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*.ts"]
}

3. 웹팩 설정

프로젝트 루트 디렉토리에 webpack.config.js 파일을 생성하고 아래와 같이 설정합니다.

const path = require('path');

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

4. 소스맵 설정

위의 웹팩 설정에서 devtool 속성을 'source-map'으로 설정하여 소스맵을 생성하도록 합니다.

5. 빌드 및 실행

웹팩으로 빌드하고 실행합니다.

npx webpack

빌드가 완료되면 dist/bundle.js와 dist/bundle.js.map 파일이 생성됩니다.

이제 소스맵을 통해 타입스크립트로 작성한 코드를 디버