웹팩(Webpack)은 모듈 번들러로, 프로젝트에서 여러 모듈 및 의존성을 번들링하여 하나의 파일로 만들어주는 도구입니다. 타입스크립트(TypeScript)와 Babel을 함께 사용하면 타입스크립트의 타입 체킹 기능과 Babel의 트랜스파일(recompile) 기능을 함께 활용할 수 있습니다.

1. webpack 모듈 설치

먼저, webpack을 사용하기 위해 필요한 모듈을 설치합니다.

npm install webpack webpack-cli --save-dev

2. 타입스크립트 및 Babel 모듈 설치

타입스크립트와 Babel 모듈도 함께 설치합니다.

npm install typescript @babel/core @babel/preset-env @babel/preset-typescript babel-loader --save-dev

3. 웹팩 구성 파일 작성

웹팩의 설정은 webpack.config.js 파일을 통해 작성합니다. 아래는 타입스크립트와 Babel을 함께 활용한 웹팩 설정의 예시입니다.

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

4. Babel 구성 파일 작성

Babel 설정은 .babelrc 파일에 작성합니다.

// .babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"]
}

이제 위의 작업을 모두 완료했다면, 웹팩과 Babel이 타입스크립트 파일을 트랜스파일하여 번들링할 준비가 끝났습니다.

위와 같이 설정할 경우, 타입스크립트 코드에서 Babel과 함께 ES6 이상의 문법을 사용할 수 있으며, Babel이 이를 ES5로 트랜스파일하여 웹팩이 번들링합니다.

이제 패키지를 빌드(build)하면, 타입스크립트와 Babel이 연동되어 동작하는 것을 확인할 수 있습니다.

이렇게 웹팩, 타입스크립트, Babel을 함께 연동하여 프로젝트를 구성하면, 강력한 타입 체킹과 다양한 환경에서의 호환성을 동시에 확보할 수 있습니다.

참고 자료

• 웹팩 공식 문서: webpack.js.org
• 타입스크립트 공식 문서: typescriptlang.org
• Babel 공식 문서: babeljs.io