From ac769e656b122ff569c3f1534701b71e00fed586 Mon Sep 17 00:00:00 2001 From: crupest Date: Tue, 27 Oct 2020 19:21:35 +0800 Subject: Split front and back end. --- FrontEnd/webpack.config.dev.js | 52 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 FrontEnd/webpack.config.dev.js (limited to 'FrontEnd/webpack.config.dev.js') diff --git a/FrontEnd/webpack.config.dev.js b/FrontEnd/webpack.config.dev.js new file mode 100644 index 00000000..c88e1aaf --- /dev/null +++ b/FrontEnd/webpack.config.dev.js @@ -0,0 +1,52 @@ +const path = require("path"); +const webpack = require("webpack"); + +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"], + }); + +config.module + .rule("js") + .use("babel") + .options({ + plugins: ["react-hot-loader/babel"], + }); + +config.module + .rule("css") + .use("style") + .before("css") + .loader("style-loader") + .end(); + +config.module + .rule("sass") + .use("style") + .before("css") + .loader("style-loader") + .end(); + +config.devtool("eval-cheap-module-source-map"); + +config.resolve.alias.set("react-dom", "@hot-loader/react-dom"); + +config.devServer + .contentBase(path.resolve(__dirname, "public/")) + .host("0.0.0.0") + .port(3000) + .historyApiFallback(true) + .hotOnly(true) + .allowedHosts.add(".myide.io"); + +config.plugin("hot").use(webpack.HotModuleReplacementPlugin); + +module.exports = config.toConfig(); -- cgit v1.2.3 From 1c69272c2aed2b0b1e6b1f1f31dfdb635151a5af Mon Sep 17 00:00:00 2001 From: crupest Date: Tue, 27 Oct 2020 21:38:59 +0800 Subject: ... --- FrontEnd/package.json | 10 ++++++---- FrontEnd/src/app/App.tsx | 3 +-- FrontEnd/src/app/i18n.ts | 12 ++---------- FrontEnd/webpack.config.dev.js | 15 ++++++++------- 4 files changed, 17 insertions(+), 23 deletions(-) (limited to 'FrontEnd/webpack.config.dev.js') 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(); -- cgit v1.2.3