[React] TypeScript 설정

1. 프로젝트 생성

yarn create react-app 프로젝트명 --template typescript

 

2. babel 설치

yarn add @babel/runtime-corejs3
yarn add -D @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript babel-loader
yarn add -D @babel/plugin-transform-runtime

 

3. webpack 설치

yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin

 

4. babel.config.json 설정

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

 

5. webpack.common.js

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

module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "..", "./src/index.tsx"),
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
          },
        ],
      },
      {
        test: /\.(ts|tsx)$/, // .tsx 또는 .ts 확장자를 가진 파일에 대해서
        exclude: /node_modules/, // node_modules 폴더에서는 제외
        use: [
          {
            loader: "babel-loader", // babel-loader를 사용하여 변환
          },
        ],
      },
      {
        test: /\.css$/, // loader를 적용할 파일(정규식으로 작성)
        use: ["style-loader", "css-loader"], // 사용할 loader
      },
    ],
  },
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js", // entry point가 1개인 경우
    // filename: '[name]_bundle.js', // entry point가 여러개인 경우
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "../public/index.html"),
    }),
  ],
  resolve: {
    extensions: [".ts", ".tsx", ".jsx", ".js", ".json"],
    alias: {
      "@": path.resolve(__dirname, "../src/"),
      "@view": path.resolve(__dirname, "../src/views"),
    },
  },
};