path alias 설정 및 index.html public 하위로 이동

package.json

@@ -10,8 +10,8 @@
     "dev": "cross-env NODE_ENV=development webpack serve --open",
     "build:dev": "cross-env NODE_ENV=development webpack",
     "build:prod": "cross-env NODE_ENV=production webpack",
-    "start:dev": "npm run build:dev && node dist/bundle.js",
-    "start:prod": "npm run build:prod && node dist/bundle.js"
+    "start:dev": "npm run build:dev && serve -s build",
+    "start:prod": "npm run build:prod && serve -s build"
   },
   "keywords": [],
   "author": "",

src/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from 'App';
+import App from '@/App';
 
 const root = ReactDOM.createRoot(document.getElementById('root')!);
 root.render(

webpack.config.js

@@ -7,16 +7,19 @@ module.exports = {
   entry: './src/index.tsx',
   output: {
     filename: 'bundle.js',
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(__dirname, 'build'),
     clean: true, // 이전 빌드 파일 삭제
   },
   resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
     extensions: ['.ts', '.tsx', '.js', '.jsx'], // 처리할 파일 확장자
   },
   module: {
     rules: [
       {
-        test: /\.tsx?$/, // 타입스크립트 파일 처리
+        test: /\.tsx?$/, // 타입스크립트 파일 처리 ts, tsx
         use: 'ts-loader',
         exclude: /node_modules/,
       },
@@ -25,7 +28,7 @@ module.exports = {
   mode: process.env.NODE_ENV || 'development',
   plugins: [
     new HtmlWebpackPlugin({
-      template: './index.html', // 기본 HTML 템플릿
+      template: './public/index.html', // 기본 HTML 템플릿
     }),
   ],
   devtool: process.env.NODE_ENV === 'development' ? 'source-map' : false, // 소스 맵