mkdir Practice_TS_Webpack // 폴더 생성
cd Practice_TS_Webpack // workspace로 이동

yarn init -y

yarn add react react-dom

yarn add -D webpack webpack-cli // 웹팩 설치

yarn add -D typescript ts-loader @types/react @types/react-dom @types/webpack // 타입 스크립트 관련 설치

// package.json 에 script 추가
scripts: {
    "dev": "webpack"
}

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "allowJs": true,
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true
    }
}

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

module.exports = {
  mode: "development",
  devtool: "eval",
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },

  entry: {
    app: path.join(__dirname, "src", "index"),
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  output: {
    path: path.join(__dirname, "dist"),
    filename: "app.js",
  },
  plugins: [new HtmlWebpackPlugin()],
};