웹 개발에서 많이 사용되는 Webpack과 TypeScript를 함께 사용하면 코드 번들링과 타입 체크가 더욱 효율적으로 가능합니다.

Webpack과 TypeScript 설정

1. 프로젝트 폴더에서 package.json 파일을 생성하고, 필요한 dependencies를 설치합니다.

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

2. tsconfig.json 파일을 생성하여 TypeScript 설정을 추가합니다.

   {
     "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
     },
     "exclude": [
    "node_modules"
     ]
   }
   

3. webpack.config.js 파일을 생성하여 Webpack 설정을 추가합니다.

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

코드 번들링과 타입 체크하기

1. src 폴더 안에 index.ts 파일을 생성하고, TypeScript 코드를 작성합니다. ```typescript function greet(name: string) { console.log(Hello, ${name}!); }

greet(‘Webpack with TypeScript’);

2. 터미널에서 Webpack을 실행하여 번들링과 타입 체크를 수행합니다.

npx webpack ```

1. dist 폴더 안에 bundle.js 파일과 함께 타입 체크 에러 메시지가 출력되면서 번들링이 완료됩니다.

결론

Webpack과 TypeScript를 함께 사용하면 개발 시간을 단축하고 코드의 품질을 향상시킬 수 있습니다. 함께 사용할 때에는 필요한 설정을 추가하고 코드를 작성하면 됩니다.