diff options
| -rw-r--r-- | FrontEnd/package.json | 10 | ||||
| -rw-r--r-- | FrontEnd/src/app/App.tsx | 3 | ||||
| -rw-r--r-- | FrontEnd/src/app/i18n.ts | 12 | ||||
| -rw-r--r-- | FrontEnd/webpack.config.dev.js | 15 |
4 files changed, 17 insertions, 23 deletions
diff --git a/FrontEnd/package.json b/FrontEnd/package.json index 65c5cbe2..12f3fbea 100644 --- a/FrontEnd/package.json +++ b/FrontEnd/package.json @@ -20,7 +20,6 @@ "react": "^17.0.1",
"react-bootstrap": "^1.4.0",
"react-dom": "^17.0.1",
- "react-hot-loader": "^4.13.0",
"react-i18next": "^11.7.3",
"react-inlinesvg": "^2.1.1",
"react-responsive": "^8.1.0",
@@ -36,7 +35,7 @@ "xregexp": "^4.3.0"
},
"scripts": {
- "start": "webpack-dev-server --config ./webpack.config.dev.js",
+ "start": "webpack serve --config ./webpack.config.dev.js",
"build": "webpack --config ./webpack.config.prod.js",
"lint": "eslint src/ --ext .js --ext .jsx --ext .ts --ext .tsx"
},
@@ -62,7 +61,7 @@ "@babel/preset-env": "^7.12.1",
"@babel/preset-react": "^7.12.1",
"@babel/preset-typescript": "^7.12.1",
- "@hot-loader/react-dom": "^17.0.0",
+ "@pmmmwh/react-refresh-webpack-plugin": "^0.4.2",
"@types/classnames": "^2.2.10",
"@types/lodash": "^4.14.162",
"@types/node": "^14.14.5",
@@ -96,13 +95,16 @@ "postcss-loader": "^4.0.4",
"postcss-preset-env": "^6.7.0",
"prettier": "^2.1.2",
+ "querystring-es3": "^0.2.1",
+ "react-refresh": "^0.9.0",
"sass": "^1.27.0",
"sass-loader": "^10.0.4",
"style-loader": "^2.0.0",
"ts-loader": "^8.0.7",
+ "type-fest": "^0.18.0",
"typescript": "^4.0.5",
"url-loader": "^4.1.1",
- "webpack": "^5.2.0",
+ "webpack": "^5.2.1",
"webpack-chain": "^6.5.1",
"webpack-cli": "^4.1.0",
"webpack-dev-server": "^3.11.0",
diff --git a/FrontEnd/src/app/App.tsx b/FrontEnd/src/app/App.tsx index b68eddb6..4e53d4da 100644 --- a/FrontEnd/src/app/App.tsx +++ b/FrontEnd/src/app/App.tsx @@ -1,6 +1,5 @@ import React from "react"; import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; -import { hot } from "react-hot-loader/root"; import AppBar from "./views/common/AppBar"; import LoadingPage from "./views/common/LoadingPage"; @@ -81,4 +80,4 @@ const App: React.FC = () => { } }; -export default hot(App); +export default App; diff --git a/FrontEnd/src/app/i18n.ts b/FrontEnd/src/app/i18n.ts index cdced7bf..aeac1f1f 100644 --- a/FrontEnd/src/app/i18n.ts +++ b/FrontEnd/src/app/i18n.ts @@ -18,18 +18,10 @@ const backend: BackendModule = { } if (language === "en") { - const res = ( - await import( - /* webpackChunkName: "locales-en" */ "./locales/en/translation" - ) - ).default; + const res = (await import("./locales/en/translation")).default; success(res); } else if (language === "zh-cn" || language === "zh") { - const res = ( - await import( - /* webpackChunkName: "locales-zh" */ "./locales/zh/translation" - ) - ).default; + const res = (await import("./locales/zh/translation")).default; success(res); } else { error(`Language ${language} is not supported.`); diff --git a/FrontEnd/webpack.config.dev.js b/FrontEnd/webpack.config.dev.js index c88e1aaf..937ab3fb 100644 --- a/FrontEnd/webpack.config.dev.js +++ b/FrontEnd/webpack.config.dev.js @@ -1,24 +1,23 @@ const path = require("path");
const webpack = require("webpack");
+const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const config = require("./webpack.common");
config.mode("development");
-config.entry("index").add("react-hot-loader/patch");
-
config.module
.rule("ts")
.use("babel")
.options({
- plugins: ["react-hot-loader/babel"],
+ plugins: ["react-refresh/babel"],
});
config.module
.rule("js")
.use("babel")
.options({
- plugins: ["react-hot-loader/babel"],
+ plugins: ["react-refresh/babel"],
});
config.module
@@ -37,16 +36,18 @@ config.module config.devtool("eval-cheap-module-source-map");
-config.resolve.alias.set("react-dom", "@hot-loader/react-dom");
+config.resolve.set("fallback", {
+ querystring: require.resolve("querystring-es3"),
+});
config.devServer
.contentBase(path.resolve(__dirname, "public/"))
.host("0.0.0.0")
.port(3000)
.historyApiFallback(true)
- .hotOnly(true)
- .allowedHosts.add(".myide.io");
+ .hotOnly(true);
config.plugin("hot").use(webpack.HotModuleReplacementPlugin);
+config.plugin("react-refresh").use(new ReactRefreshWebpackPlugin());
module.exports = config.toConfig();
|