웹팩(Webpack)은 강력한 모듈 번들러로서, 프로젝트에서 여러 모듈 및 자원을 번들링하여 하나로 만들어주는 도구입니다. 타입스크립트(TypeScript)를 사용하고자 하는 경우, 함께 Babel을 사용하여 ES5 이하의 브라우저에서도 동작할 수 있는 코드로 변환할 수 있습니다. 이 글에서는 타입스크립트와 Babel을 함께 웹팩에서 설정하는 방법에 대해 알아보겠습니다.

1. 프로젝트 초기화

먼저, 프로젝트를 초기화합니다. 만약 아직 프로젝트가 없다면 다음 명령어를 사용하여 프로젝트를 새로 만들어주세요.

mkdir my-typescript-project
cd my-typescript-project
npm init -y

2. 필수 모듈 설치

웹팩과 타입스크립트, Babel 관련 모듈을 설치합니다.

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

3. 웹팩 설정

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

const path = require('path');

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

4. Babel 설정

프로젝트 루트에 .babelrc 파일을 생성하고 아래와 같이 설정합니다.

{
  "presets": ["@babel/preset-env"]
}

5. 타입스크립트 설정

프로젝트 루트에 tsconfig.json 파일을 생성하고 타입스크립트 설정을 추가합니다.

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

이제, 모든 설정이 완료되었습니다. 코드를 통해 타입스크립트와 Babel을 함께 사용하며, 웹팩을 통해 번들링할 수 있게 되었습니다. 이제 npm run build 명령어를 통해 웹팩 빌드를 실행하고, 생성된 dist/bundle.js 파일을 브라우저에서 실행할 수 있습니다.

참고 자료

• 웹팩 공식 문서
• 타입스크립트 공식 문서
• Babel 공식 문서