webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.tsx', // 애플리케이션의 진입점
  output: {
    path: path.resolve(__dirname, 'dist'), // 번들 파일이 저장될 디렉토리
    filename: 'bundle.js',                 // 출력 파일 이름
    clean: true                            // 이전 번들 삭제
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'], // 해석 가능한 파일 확장자
    alias: {
      '@': path.resolve(__dirname, 'src') // 절대 경로 설정
    }
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,              // TypeScript와 JSX 파일 처리
        use: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,                   // CSS 파일 처리
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,    // 이미지 파일 처리
        type: 'asset/resource'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',    // HTML 템플릿 파일
      favicon: './public/favicon.ico'     // 파비콘 파일
    })
  ],
  devServer: {
    static: './dist',                     // 정적 파일 경로
    port: 3000,                           // 개발 서버 포트
    open: true,                            // 브라우저 자동 열기
    //historyApiFallback: true,              // 모든 경로를 index.html로 리다이렉트
   },
  mode: 'development'                     // 개발 모드 설정
};