타입스크립트 설정

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const HTMLWeebPackPlugin = require("html-webpack-plugin"); // 아까 설치한 플러그인이죠? html 문서에 자동으로 번들파일을 추가해줍니다.
const path = require("path");

module.exports = {
  entry: "./src/index.tsx", // 처음 시작할 파일을 지정해줍니다. 지정하지 않으면 './src/index.js'가 기본 값이기 때문에 적어줘야 해요
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: [
          "babel-loader",
          {
            loader: "ts-loader",
            options: {
              transpileOnly: true,
            },
          },
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        enforce: "pre",
        test: /\.js$/,
        loader: "source-map-loader",
      },
    ],
  },
  devServer: {
    port: 5500,
  },
  resolve: {
    extensions: [".ts", ".js"],
  },
  output: {
    filename: "bundle.[hash].js",
    path: path.resolve(__dirname, "dist"), // 그리고 경로 입니다.
  },
  plugins: [
    new CleanWebpackPlugin({
      cleanStaleWebpackAssets: false,
    }),
    new HTMLWeebPackPlugin({
      template: "./public/index.html",
      filename: "./index.html",
    }), // './src/index.html' 경로의 html 파일에 번들 파일을 넣어줍니다.
    new ForkTsCheckerWebpackPlugin(),
  ],
  mode: "development",
};

{
  "name": "typescript-example",
  "version": "1.0.0",
  "description": "Typescript Example",
  "main": "index.js",
  "scripts": {
    "start": "npm run build:live",
    "build": "tsc -p .",
    "build:live": "nodemon --watch src/**/*.ts --exec \"ts-node\" src/index.ts"
  },
  "author": "@jaewoong2",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.17.10",
    "@babel/preset-env": "^7.17.10",
    "@babel/preset-typescript": "^7.16.7",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.6",
    "@types/node": "^17.0.32",
    "babel-loader": "^8.2.5",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.1",
    "fork-ts-checker-webpack-plugin": "^7.2.11",
    "html-webpack-plugin": "^5.5.0",
    "interpolate-html-plugin": "^4.0.0",
    "nodemon": "^2.0.16",
    "source-map-loader": "^3.0.1",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.3.0",
    "ts-node": "^10.7.0",
    "typescript": "^4.6.4",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  }
}