Webpack 換成 Vite

原本的專案都是用 webpack 打包，現在想換成 vite 看看

安裝 Vite 和相關的 Plugins

1	`npm install vite @vitejs/plugin-react --save-dev`

Restructure Project

原本我是只有 src 和 dist 資料夾，但是 Vite 會需要 src、dist 和 public。所有靜態資源包含圖片、404.html和 CNAME 等都要放在 public，在跑 vite build 的時候它會去讀取 public 資料夾裡面的資源，最後一並放入 dist。

新增 vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

// Detect environment mode
const isDev = process.env.NODE_ENV === "development";
console.log("isDev: ", isDev);

export default defineConfig({
  plugins: [react()],
  root: path.resolve(__dirname, "src"),
  publicDir: path.resolve(__dirname, "public"),
  resolve: {
    alias: {
      States: path.resolve(__dirname, "src/States"),
      Utilities: path.resolve(__dirname, "src/Utilities"),
      Components: path.resolve(__dirname, "src/Components"),
    },
  },
  server: {
    port: 7070,
    strictPort: true,
    open: true, // Open browser automatically
  },
  build: {
    outDir: path.resolve(__dirname, "dist"),
    emptyOutDir: true,
    sourcemap: isDev ? "inline-source-map" : false,
  },
  define: {
    "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
  },
  base: isDev ? "/" : "https://bms.carbon-walker.com/",
});

package.json

這部分要改成

"scripts": {
  "dev": "vite",
  "build": "vite build --emptyOutDir",
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist",
  "format": "prettier --write ."
},