feat: support sub path

.github/workflows/build.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
 
     env:
-      PUBLIC_PATH: webpack5-react-template
+      PUBLIC_PATH: /webpack5-react-template/
 
     steps:
       - name: Checkout

env/development.env

@@ -1 +1,2 @@
 APP_URL=url
+PUBLIC_PATH=/

env/production.env

@@ -0,0 +1,2 @@
+## this should not commit actually
+# PUBLIC_PATH=/webpack5-react-template/

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "prepare": "husky install & npx only-allow pnpm",
     "commit": "git-cz",
-    "dev": "cross-env NODE_ENV=development TS_NODE_PROJECT=\\\"tsconfig.webpack.json\\\" webpack serve --config webpack/webpack.development.ts",
+    "dev": "cross-env NODE_ENV=development DEBUG=true TS_NODE_PROJECT=\\\"tsconfig.webpack.json\\\" webpack serve --config webpack/webpack.development.ts",
     "build": "cross-env NODE_ENV=production TS_NODE_PROJECT=\\\"tsconfig.webpack.json\\\" webpack --config webpack/webpack.production.ts",
     "build:analyzer": "cross-env NODE_ENV=production analyzer=true TS_NODE_PROJECT=\\\"tsconfig.webpack.json\\\" webpack --config webpack/webpack.production.ts",
     "preview": "serve dist -p 3001",

src/react-app-env.d.ts

@@ -6,7 +6,8 @@
 declare namespace NodeJS {
   interface ProcessEnv {
     readonly NODE_ENV: 'development' | 'production' | 'test'
-    readonly PUBLIC_URL: string
+    readonly PUBLIC_PATH: string
+    readonly DEBUG: boolean
   }
 }
 

src/routes/index.tsx

@@ -58,13 +58,18 @@ const mainRouters: RouteObject[] = [
   { path: 'payment', element: <Payment amount={19.9} /> },
 ]
 
-export const routers = createBrowserRouter([
-  // this is just for warp all page with header and footer: https://stackoverflow.com/questions/70833727/using-react-router-v6-i-need-a-navbar-to-permanently-be-there-but-cant-display
+export const routers = createBrowserRouter(
+  [
+    // this is just for warp all page with header and footer: https://stackoverflow.com/questions/70833727/using-react-router-v6-i-need-a-navbar-to-permanently-be-there-but-cant-display
+    {
+      path: '/',
+      element: <Layout />,
+      // 404
+      errorElement: <NotFound />,
+      children: mainRouters,
+    },
+  ],
   {
-    path: '/',
-    element: <Layout />,
-    // 404
-    errorElement: <NotFound />,
-    children: mainRouters,
-  },
-])
+    basename: process.env.PUBLIC_PATH,
+  }
+)

webpack/config.ts

@@ -11,10 +11,14 @@ export const IS_DEV = NODE_ENV === 'development'
 const ENV_CONFIG_PATH = path.resolve(ROOT_PATH, 'env', `${NODE_ENV}.env`)
 
 // node 读取env 配置
-loadConfig({
+const envs = loadConfig({
   path: ENV_CONFIG_PATH,
+  // todo fix type
+  debug: process.env.DEBUG as unknown as boolean,
 })
 
+export const envKeys = Object.keys(envs.parsed)
+
 export const PUBLIC_PATH = process.env.PUBLIC_PATH ?? '/'
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment

webpack/webpack.common.ts

@@ -5,9 +5,10 @@ import MiniCssExtractPlugin from 'mini-css-extract-plugin'
 import * as path from 'path'
 import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin'
 import type { Configuration } from 'webpack'
+import { DefinePlugin } from 'webpack'
 import WebpackBar from 'webpackbar'
 
-import { IS_DEV, PUBLIC_PATH } from './config'
+import { envKeys, IS_DEV, PUBLIC_PATH } from './config'
 // import { handleProgress } from './utils/handleProgress'
 
 // fix error: tsconfig-paths-webpack-plugin: Found no baseUrl in tsconfig.json, not applying tsconfig-paths-webpack-plugin
@@ -130,6 +131,14 @@ const config: Configuration = {
       // basic: false, // 默认true，启用一个简单的日志报告器
       // profile: false, // 默认false，启用探查器。
     }),
+    new DefinePlugin(
+      envKeys.reduce((prev, envKey) => {
+        prev[`process.env.${envKey}`] = JSON.stringify(
+          process.env[envKey] ?? ''
+        )
+        return prev
+      }, {})
+    ),
   ],
 }