!1881 开发:React热重载

config/webpack.dev.ts

@@ -2,6 +2,8 @@ import * as webpack from 'webpack';
 import { Configuration } from 'webpack';
 import { merge } from 'webpack-merge';
 import common from './webpack.common';
+//hmr
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 
 const config: webpack.Configuration = merge(
     common,
@@ -52,7 +54,11 @@ const config: webpack.Configuration = merge(
         },
         optimization: {
             moduleIds: "named",
-        }
+        },
+        //hmr
+        plugins: [
+            new ReactRefreshWebpackPlugin()
+        ],
     } as Configuration
 );
 

config/webpack.dll.ts

@@ -10,8 +10,8 @@ const vendors = [
     "mobx",
     "mobx-react",
     "react",
-    "react-color",
     "react-dom",
+    "react-color",
     "react-rnd",
     "stats.js",
     "pako",

package.json

@@ -8,6 +8,7 @@
         "dev2": "webpack-dev-server --config web-cad-view.config.ts",
         "buildview": "webpack --config dll.config.js &&webpack --config web-cad-view.config.ts",
         "dll": "webpack --config ./config/webpack.dll.ts",
+        "dlldev": "webpack --config ./config/webpack.dll.ts --mode=development",
         "build": "webpack --config ./config/webpack.prod.ts && ts-node ./utils/log.ts && ts-node ./utils/publish.ts",
         "api-test": "webpack --config ./config/webcadapi.umd.config.ts --display-modules",
         "api": "rollup --config ./config/api.rollup.config.js && ts-node ./utils/replace_api_file.ts",
@@ -27,6 +28,7 @@
     "author": "",
     "license": "ISC",
     "devDependencies": {
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
         "@rollup/plugin-typescript": "^8.3.2",
         "@types/blueimp-md5": "^2.18.0",
         "@types/flatbush": "^3.3.0",
@@ -59,7 +61,7 @@
         "jest-snapshot": "^27.5.1",
         "less": "^4.1.2",
         "less-loader": "10.2.0",
-        "react-hot-loader": "^4.13.0",
+        "react-refresh": "^0.12.0",
         "request": "^2.88.2",
         "request-promise-native": "^1.0.9",
         "required-loader": "^1.3.16",

src/UI/Components/Board/UpdateBoardInfos.tsx

@@ -2,7 +2,6 @@ import { Button, Card, Checkbox, Classes, HTMLSelect, Intent, Position } from '@
 import { toJS } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { hot } from 'react-hot-loader/root';
 import * as xaop from 'xaop';
 import { app } from '../../../ApplicationServices/Application';
 import { EBoardKeyList } from '../../../Common/BoardKeyList';
@@ -30,7 +29,6 @@ export interface IUpdateBoardInfoModalProps
     store: UpdateBoardInfosStore;
 }
 
-@hot
 @observer
 export class UpdateBoardInfoModal extends React.Component<IUpdateBoardInfoModalProps> {
     private event: Function;