Webpack 타입스크립트 초기 설정

설치는 웹팩, 타입스크립트, 리액트 설치 방법은 링크 참조

https://velog.io/@gabdol/Webpack-TypeScript-React-%EC%9D%B4%EC%9A%A9-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%8B%9C%EC%9E%91-%EC%88%9C%EC%84%9C

1. webpack.config.js 파일 생성

const path = require("path");
const webpack = require("webpack");

module.exports = {
  mode: "development", // 실제 서비스시에는 production
  devtool: "eval", // 실제 서비스시에는 hidden-source-map
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"],
  },

  //입력
  entry: {
    app: "./scr/client", //최상위 위치에서 client.tsx 파일 경로 설정
  },

  //모듈 적용
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "awesome-typescript-loader",
      },
    ],
  },
  plugins: [],

  //출력
  output: {
    filename: "[name].js",
    path: path.join(__dirname, "dist"), // 웹팩이 생성할 dist 폴더 안에 app.js파일 경로
  },
};

2. tsconfig.json 파일 생성

{
  "compilerOptions": {
    "strict": true,
    "lib": ["es5", "es2015", "es2016", "es2017", "es2020", "dom"],
    "jsx": "react"
  }
}

3. client.tsx 파일 생성

import * as React from "react";
import * as ReactDOM from "react-dom";
import example from "./example";

ReactDOM.render(<Example />, document.getElementById("root"));

CRA을 이용했을 때, index.tsx 파일의 역할과 같음

4. example.tsx 파일 생성

import * as React from "react";
import Main from "./pages/main";

const Example = () => {
  return (
    <>
      <Main />
    </>
  );
};

export default Example;

CRA을 이용했을 때, app.tsx 파일의 역할과 같음
파일명은 원하는대로 설정하면 된다.