웹팩(Webpack)은 모듈 번들러로서, 타입스크립트(TypeScript)의 모듈 시스템을 인식하고 번들링할 수 있습니다. 하지만 때때로 웹팩이 타입스크립트 모듈을 올바르게 인식하지 못할 수도 있습니다. 여기에는 일부 설정이 필요합니다. 이번 글에서는 웹팩에서 타입스크립트 모듈을 올바르게 인식하기 위한 방법에 대해 알아보겠습니다.

웹팩 설정

먼저, webpack.config.js 파일에 다음과 같이 module을 추가하여 타입스크립트 파일을 처리하도록 설정합니다.

module.exports = {
  // ... 기타 설정
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  // ... 기타 설정
};

위의 설정에서 ts-loader는 웹팩에서 타입스크립트를 처리하기 위한 로더입니다. resolve.extensions는 타입스크립트 파일 확장자를 지정하는 옵션입니다.

타입스크립트 구성

타입스크립트 프로젝트의 tsconfig.json 파일에는 module 옵션을 ESNext나 CommonJS로 설정해야 합니다.

{
  "compilerOptions": {
    // ... 기타 옵션
    "module": "ESNext",
    // 또는 "module": "CommonJS",
    // ... 기타 옵션
  }
}

module 옵션을 설정함으로써 타입스크립트 컴파일러가 올바른 모듈 형식을 사용하도록 할 수 있습니다.

위의 설정을 통해 웹팩은 타입스크립트 모듈을 올바르게 인식할 수 있게 됩니다.

결론

웹팩과 타입스크립트를 함께 사용하는 경우, 올바른 설정을 통해 모듈 인식 문제를 해결할 수 있습니다. 웹팩 설정과 타입스크립트 구성을 적절히 조정하여 둘 사이의 시너지 효과를 극대화할 수 있습니다.

이상으로 웹팩으로 타입스크립트 모듈을 인식하는 방법에 대해 알아보았습니다.

더 많은 정보는 웹팩 공식 문서를 참고하시기 바랍니다.