React + Typescript without CRA

환경설정

// package.json 초기설정
npm init -y

// react, react-dom 설치
yarn add react react-dom

// devDependencies에 typescript, @types/react @types/react-dom 설치
yarn add -D typescript @types/react @types/react-dom

// tsconfig.json 설정
tsc -- init

// babel 관련 라이브러리 설치
yarn add -D @babel/core @babel/preset-env 
@babel/preset-react @babel/preset-typescript babel-loader
@babel/plugin-transform-runtime

// webpack 관련 라이브러리 설치
yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin

package.json

{
	...
    "scripts": {
        "dev": "webpack server --mode development --open --hot",
        "build": "webpack --mode production",
        "prestart": "cross-env NODE_ENV=production npm run build",
        "start": "webpack --mode development"
    },
	...
    "dependencies": {
    	...
        "dotenv": "^16.0.0",
        "react": "^18.0.0",
        "react-dom": "^18.0.0"
        ...
    },
    "devDependencies": {
	    ...
        "@babel/core": "^7.17.9",
        "@babel/plugin-transform-runtime": "^7.17.0",
        "@babel/preset-env": "^7.16.11",
        "@babel/preset-react": "^7.16.7",
        "@babel/preset-typescript": "^7.16.7",
        "@babel/runtime-corejs3": "^7.17.9",
        "@types/react": "^18.0.1",
        "@types/react-dom": "^18.0.0",
        "babel-loader": "^8.2.4",
        "clean-webpack-plugin": "^4.0.0",
        "html-webpack-plugin": "^5.5.0",
        "typescript": "^4.6.3",
        "webpack": "^5.72.0",
        "webpack-cli": "^4.9.2",
        "webpack-dev-server": "^4.8.1",
        "cross-env": "^7.0.3"
        ...
    }
}

.babelrc

{
    "presets": [
        "@babel/preset-env",
        [
            "@babel/preset-react",
            {
                "runtime": "automatic"
            }
        ],
        "@babel/preset-typescript"
    ],
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "regenerator": true
            }
        ]
    ]
}

webpack.config.js

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './index.tsx', // 번들링 시작 위치
    output: {
        path: path.join(__dirname, '/dist'), // 번들 결과물 위치
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.(ts|js)x?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                },
            },
        ],
    },
    resolve: {
        modules: [path.join(__dirname, 'src'), 'node_modules'], // 모듈 위치
        extensions: ['.tsx', '.ts', '.js', '.jsx'],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
        }),
    ],
    devServer: {
        // live-server host 및 port
        host: 'localhost',
        port: 5500,
    },
    mode: 'development', // 번들링 모드 development / production
};

디렉토리 경로