chore: vite react ts config

Author: choisohyun

.env.development

@@ -1 +1 @@
-TEST=development
+VITE_TEST=development

.env.production

@@ -1 +1 @@
-TEST=production
+VITE_TEST=production

README.md

@@ -1,20 +1,53 @@
 # My React Boilerplate
 
-## 현재 설정 내역
+## Dependencies
 
-- react
-- redux
-- styled component
-- axios
-- babel
-- dotenv
-- webpack + esbuild-loader
+- React
+- Vite
+- Typescript 
+- eslint
+- Prettier
 
-## 사용 방법
+## How to use
 
 ```
-git clone https://github.com/choisohyun/my-react-boilerplate.git
-npm install
-npm start
-npm run build
+gh repo clone choisohyun/react-vite-ts-boilerplate
+yarn install
+yarn dev
+yarn prod
 ```
+
+- fast dev server
+
+```bash
+$ yarn dev
+yarn run v1.22.17
+$ vite
+                                                                                                                                                                                           16:58:10
+  vite v2.8.6 dev server running at:
+
+  > Local: http://localhost:3000/                                                                                                                                                          16:58:10
+  > Network: use --host to expose                                                                                                                                                          16:58:10
+                                                                                                                                                                                           16:58:10
+  ready in 776ms.
+```
+
+- fast build speed
+
+```bash
+$ yarn prod               
+yarn run v1.22.17
+$ vite build
+vite v2.8.6 building for production...                                                                                                                                                     17:01:48
+✓ 1 modules transformed.                                                                                                                                                                   17:01:48
+transforming (17) node_modules/@babel/runtime/helpers/esm/extends.js
+ WARN  Generated an empty chunk: "vendor"                                                                                                                                                  17:01:48
+
+
+ WARN  Generated an empty chunk: "index"                                                                                                                                                   17:01:48
+
+dist/public/index.html           0.47 KiB                                                                                                                                                  17:01:48
+dist/assets/vendor.e3bb175a.js   0.00 KiB / gzip: 0.02 KiB                                                                                                                                 17:01:48
+✨  Done in 1.61s.
+```
+

package.json

@@ -3,64 +3,43 @@
   "version": "1.0.41",
   "license": "MIT",
   "scripts": {
-    "start": "webpack-dev-server --env=dev",
-    "build": "rm -rf dist/ && webpack --env=prod"
+    "dev": "vite",
+    "prod": "vite build"
   },
   "dependencies": {
-    "axios": "^0.21.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-redux": "^7.2.0",
-    "react-router-dom": "^6.2.1",
-    "redux": "^4.0.5",
-    "redux-actions": "^2.6.5",
-    "redux-thunk": "^2.3.0",
-    "styled-components": "^5.1.1",
-    "styled-reset": "^4.1.5"
+    "react-router-dom": "^6.2.1"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "7.16.4",
-    "@babel/preset-env": "^7.16.4",
-    "@babel/preset-react": "7.16.0",
-    "@babel/preset-typescript": "7.16.0",
-    "@types/dotenv-webpack": "^7.0.3",
+    "@rollup/plugin-alias": "^3.1.9",
     "@types/react": "17.0.35",
     "@types/react-dom": "17.0.11",
     "@typescript-eslint/eslint-plugin": "5.4.0",
     "@typescript-eslint/parser": "5.4.0",
+    "@vitejs/plugin-react": "^1.2.0",
+    "@vitejs/plugin-react-refresh": "^1.3.6",
+    "autoprefixer": "^10.4.2",
     "babel-eslint": "10.1.0",
     "babel-polyfill": "^6.26.0",
-    "clean-webpack-plugin": "^4.0.0",
     "core-js": "^3.19.1",
-    "css-loader": "^6.5.1",
-    "dotenv-webpack": "^7.0.3",
-    "esbuild-loader": "^2.16.0",
+    "cssnano": "^5.1.1",
     "eslint": "^7.28.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-webpack-plugin": "3.1.1",
-    "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "6.5.0",
-    "fs": "0.0.1-security",
-    "html-webpack-plugin": "^5.5.0",
     "husky": "4",
     "lint-staged": "^12.0.3",
-    "mini-css-extract-plugin": "2.4.5",
-    "optimize-css-assets-webpack-plugin": "^6.0.1",
+    "postcss": "^8.4.8",
+    "postcss-import": "^14.0.2",
+    "postcss-load-config": "^3.1.3",
+    "postcss-loader": "^6.2.1",
+    "postcss-nested": "^5.0.6",
     "prettier": "^2.4.1",
-    "react-helmet": "^6.1.0",
     "sass": "1.43.5",
-    "sass-loader": "12.3.0",
-    "style-loader": "3.3.1",
-    "ts-jest": "27.0.7",
     "typescript": "^4.5.2",
-    "url-loader": "4.1.1",
-    "webpack": "^5.65.0",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.5.0",
-    "webpack-manifest-plugin": "^4.0.2",
-    "webpack-merge": "^5.8.0"
+    "vite": "^2.8.6",
+    "vite-plugin-html": "^3.1.0",
+    "vite-tsconfig-paths": "^3.4.1"
   },
   "husky": {
     "hooks": {

public/index.html

@@ -11,5 +11,6 @@
 
   <body>
     <div id="root"></div>
+    <div id="mode"></div>
   </body>
 </html>

src/App.tsx

@@ -1,16 +1,11 @@
-import React, { Suspense } from 'react';
+import React from 'react';
 import routes from '@/routes/index';
 import { useRoutes } from 'react-router-dom';
 
 const App = () => {
   const element = useRoutes(routes);
-  console.log(element);
 
-  return (
-    <>
-      <Suspense fallback={<div>Loading...</div>}>{element}</Suspense>
-    </>
-  );
+  return <>{element}</>;
 };
 
 export default App;

src/pages/main/index.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
 
 const Main = () => {
-  return <div>Main</div>;
+  return (
+    <>
+      <h2>Hello World</h2>
+      <p>{import.meta.env.VITE_TEST}</p>
+    </>
+  );
 };
 
 export default Main;

src/routes/index.tsx

@@ -1,22 +1,12 @@
-import React, { lazy } from 'react';
+import React from 'react';
 import { RouteObject } from 'react-router-dom';
-
-const getRouteConfig = (path: string, componentPath: string) => {
-  return {
-    path,
-    component: getComponent(componentPath),
-  };
-};
-
-const getComponent = (componentPath: string) => {
-  return lazy(() => import(/* webpackChunkName: "contents" */ `@/pages/${componentPath}`));
-};
-
-const Main = getComponent('main');
+import Layout from '@/pages/layout';
+import Main from '@/pages/main';
 
 export default [
   {
-    ...getRouteConfig('/', 'layout'),
+    path: '/',
+    element: <Layout />,
     children: [{ index: true, element: <Main /> }],
   },
 ] as RouteObject[];

src/types/env.d.ts

@@ -0,0 +1,7 @@
+interface ImportMetaEnv {
+  readonly VITE_TEST: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

src/types/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

vite.config.js

@@ -0,0 +1,91 @@
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import { createHtmlPlugin } from 'vite-plugin-html';
+import path from 'path';
+
+import { dependencies } from './package.json';
+function renderChunks(deps) {
+  let chunks = {};
+  Object.keys(deps).forEach(key => {
+    if (['react', 'react-router-dom', 'react-dom'].includes(key)) return;
+    chunks[key] = [key];
+  });
+  return chunks;
+}
+
+function transformHtml(mode) {
+  return {
+    name: 'html-transform',
+    transformIndexHtml(html) {
+      const dev = `<script type="module">
+      import RefreshRuntime from "http://localhost:3000/@react-refresh"
+      RefreshRuntime.injectIntoGlobalHook(window)
+      window.$RefreshReg$ = () => {}
+      window.$RefreshSig$ = () => (type) => type
+      window.__vite_plugin_react_preamble_installed__ = true
+    </script>
+    <script type="module" src="http://localhost:3000/@vite/client"></script>
+    <script type="module" src="http://localhost:3000/src/index.tsx"></script>`;
+      const prod = `<script type="module" src="/src/index.tsx"></script>`;
+
+      return html.replace('<div id="mode"></div>', mode === 'development' ? dev : prod);
+    },
+  };
+}
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, 'env');
+
+  return {
+    server: { hmr: true },
+    plugins: [
+      react({
+        include: ['**/*.tsx', '**/*.ts'],
+      }),
+      tsconfigPaths(),
+      transformHtml(mode),
+      createHtmlPlugin({
+        minify: true,
+        inject: {
+          data: {
+            ...env,
+            MODE: mode,
+          },
+        },
+        template: 'public/index.html',
+      }),
+    ],
+    resolve: {
+      alias: { '@': path.resolve(__dirname, 'src/') },
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: `@import "./src/assets/scss/style.scss";`,
+        },
+      },
+      postcss: ctx => ({
+        parser: ctx.parser ? 'sugarss' : false,
+        map: ctx.env === 'development' ? ctx.map : false,
+        plugins: {
+          'postcss-import': {},
+          'postcss-nested': {},
+          cssnano: ctx.env === 'production' ? {} : false,
+          autoprefixer: { overrideBrowserslist: ['defaults'] },
+        },
+      }),
+    },
+    build: {
+      sourcemap: false,
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            vendor: ['react', 'react-router-dom', 'react-dom'],
+            ...renderChunks(dependencies),
+          },
+        },
+      },
+    },
+  };
+});