1. 소개
2. 설치
3. 구성
4. 컴파일
5. 결론

소개

웹팩(Webpack)은 모듈 번들러로, 프런트엔드 자바스크립트 애플리케이션의 소스 코드를 한 개 이상의 번들로 만들어줍니다. 타입스크립트(TypeScript)는 정적 타입을 지원하는 JavaScript 슈퍼셋입니다. 이 블로그에서는 웹팩을 사용하여 타입스크립트를 컴파일하는 방법에 대해 알아보겠습니다.

설치

먼저, 웹팩과 타입스크립트를 프로젝트에 설치해야 합니다. 아래 명령어를 사용하여 필요한 패키지를 설치할 수 있습니다.

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

구성

웹팩 구성 파일(webpack.config.js)에 타입스크립트 로더를 추가해야 합니다.

// webpack.config.js

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

컴파일

이제 프로젝트 루트 디렉토리에 tsconfig.json 파일을 생성하여 타입스크립트 컴파일 옵션을 구성해야 합니다.

// tsconfig.json

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

웹팩을 실행하여 타입스크립트를 컴파일할 수 있습니다.

npx webpack

결론

웹팩으로 타입스크립트를 컴파일하는 방법에 대해 알아보았습니다. 이제 타입스크립트로 작성된 프로젝트를 웹팩을 사용하여 번들링할 수 있을 것입니다.

참고문헌:

• Webpack Documentation
• TypeScript Documentation