TypeScript Webpack deveServer설정 예시

package.json

"dev": "webpack serve --env development",
"dependencies": {
    "@types/react": "^17.0.38",
    "@types/react-dom": "^17.0.11",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "typescript": "^4.5.5"
  },
  "devDependencies": {
    "@babel/core": "^7.16.12",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
    "@types/webpack": "^4.41.24",
    "@types/webpack-dev-server": "^3.11.1",
    "babel-loader": "^8.2.3",
    "fork-ts-checker-webpack-plugin": "^6.5.0",  
    "react-refresh": "^0.11.0",
    "ts-loader": "^9.2.6",
    "ts-node": "^9.0.0",
    "webpack": "^5.67.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.3"
  }

• fork-ts-checker-webpack-plugin:
  typescript의 타입을 분리된 프로세스에서 체크해주는 웹팩 플러그인
• ts-node:
  Node.js 상에서 TypeScript Compiler를 통하지 않고도, 직접 TypeScript를 실행시키는 역할 수행

tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "lib": ["es5", "es2015", "es2016", "es2017", "es2020", "dom"],
    "jsx": "react",
    "esModuleInterop": true // 내용 추가
  }
}

webpack.config.ts

import path from "path";
import ReactRefreshPlugin from "@pmmmwh/react-refresh-webpack-plugin";
import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
import { Configuration } from "webpack";

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

  //입력
  entry: {
    app: "./scr/client",
  },

  //모듈 적용
  module: {
    rules: [
      {
        loader: "babel-loader",
        options: { plugins: ["react-refresh/babel"] },
      },

      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        exclude: path.join(__dirname, "node_modules"),
      },
    ],
  },
  plugins: [new ReactRefreshPlugin(), new ForkTsCheckerWebpackPlugin()],

  //출력
  output: {
    filename: "[name].js",
    path: path.join(__dirname, "dist"),
    publicPath: "/dist",
  },
  devServer: {
    // publicPath: "/dist/",
    hot: true,
  },
};

export default config;

출처:
https://github.com/ZeroCho/ts-react