chore(web): switched built tool, webpack to Vite

web/package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "webpack-dev-server --config webpack.dev.ts --hot",
+    "start": "vite serve --port 3000",
-    "build": "webpack --config webpack.prod.ts"
+    "build": "vite build"
   },
   "dependencies": {
     "@emotion/react": "^11.4.1",
@@ -30,38 +30,21 @@
     "react-toastify": "^9.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/node": "^7.16.0",
-    "@babel/plugin-proposal-class-properties": "^7.16.0",
-    "@babel/preset-env": "^7.16.4",
-    "@babel/preset-react": "^7.16.0",
-    "@babel/preset-typescript": "^7.16.0",
-    "@types/dotenv-webpack": "^7.0.3",
-    "@types/prismjs": "^1.16.6",
     "@types/react": "^17.0.37",
     "@types/react-copy-to-clipboard": "^5.0.2",
     "@types/react-dom": "^17.0.11",
     "@types/react-router-dom": "^5.3.1",
-    "babel-loader": "^8.2.3",
+    "@vitejs/plugin-react": "^2.1.0",
-    "babel-plugin-prismjs": "^2.1.0",
-    "copy-webpack-plugin": "^10.0.0",
-    "css-loader": "^6.5.1",
-    "dotenv-webpack": "^7.1.0",
     "eslint": "^8.5.0",
     "eslint-config-react-app": "^7.0.0",
-    "eslint-webpack-plugin": "^3.1.1",
-    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "5.5.0",
     "path": "0.12.7",
     "prettier": "^2.4.1",
     "sass": "^1.44.0",
-    "sass-loader": "^12.3.0",
-    "style-loader": "^3.3.1",
-    "ts-loader": "^9.2.6",
     "typescript": "^4.5.2",
-    "webpack": "5.64.3",
+    "vite": "^3.1.4",
-    "webpack-cli": "^4.9.2",
+    "vite-plugin-env-compatible": "^1.1.1",
-    "webpack-dev-server": "4.7.4"
+    "vite-plugin-html": "^3.2.0",
+    "vite-plugin-monaco-editor": "^1.1.0"
   },
   "eslintConfig": {
     "extends": [

web/src/index.html

@@ -35,5 +35,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

web/vite.config.js

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { createHtmlPlugin } from 'vite-plugin-html'
+import envCompatible from 'vite-plugin-env-compatible'
+
+export default defineConfig({
+  build: {
+    outDir: './build'
+  },
+  plugins: [
+    react(),
+    createHtmlPlugin({
+      template: './src/index.html'
+    }),
+    envCompatible({ prefix: '' })
+  ]
+})