feat: enable msw for GitHub page and fix public folder miss files whe…

…n bundle

.github/workflows/build.yml

@@ -12,6 +12,7 @@ jobs:
 
     env:
       PUBLIC_PATH: /webpack5-react-template/
+      MSW_ENABLE: true
 
     steps:
       - name: Checkout

env/development.env → env/.env.development

@@ -1,2 +1,3 @@
 APP_URL=url
 PUBLIC_PATH=/
+MSW_ENABLE=true

env/production.env → env/.env.production

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

package.json

@@ -73,6 +73,7 @@
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "commitizen": "^4.3.0",
+    "copy-webpack-plugin": "^11.0.0",
     "core-js": "^3.29.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",

src/index.tsx

@@ -6,10 +6,7 @@ import App from './App'
 import './style/index.css'
 
 async function prepareApp() {
-  if (
-    process.env.NODE_ENV === 'development' ||
-    process.env.NODE_ENV === 'test'
-  ) {
+  if (process.env.MSW_ENABLE) {
     const { worker } = await import('./__mocks__/browser')
     return worker.start()
   }

src/react-app-env.d.ts

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

webpack/config.ts

@@ -8,7 +8,7 @@ export const NODE_ENV = process.env.NODE_ENV
 
 export const IS_DEV = NODE_ENV === 'development'
 
-const ENV_CONFIG_PATH = path.resolve(ROOT_PATH, 'env', `${NODE_ENV}.env`)
+const ENV_CONFIG_PATH = path.resolve(ROOT_PATH, 'env', `.env.${NODE_ENV}`)
 
 // node 读取env 配置
 loadConfig({
@@ -17,7 +17,7 @@ loadConfig({
   debug: process.env.DEBUG as unknown as boolean,
 })
 
-export const envKeys = ['PUBLIC_PATH'] // todo: coupled with env
+export const envKeys = ['NODE_ENV', 'PUBLIC_PATH', 'MSW_ENABLE'] // todo: coupled with env
 
 export const PUBLIC_PATH = process.env.PUBLIC_PATH ?? '/'
 

webpack/webpack.production.ts

@@ -4,6 +4,7 @@ import TerserPlugin from 'terser-webpack-plugin'
 import type { Configuration } from 'webpack'
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'
 import merge from 'webpack-merge'
+import CopyWebpackPlugin from 'copy-webpack-plugin'
 
 // import InlineRuntimeChunkPlugin from './plugins/inline-runtime-chunk-html'
 import commonConfig from './webpack.common'
@@ -40,6 +41,19 @@ const config: Configuration = {
     },
   },
   plugins: [
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: 'public',
+          to: '',
+          globOptions: {
+            ignore: process.env.MSW_ENABLE
+              ? ['**/index.html']
+              : ['**/mockServiceWorker.js', '**/index.html'],
+          },
+        },
+      ],
+    }),
     new MiniCssExtractPlugin({
       // Options similar to the same options in webpackOptions.output
       // all options are optional