client: enable React Fast Refresh for development

2026-06-04 03:27:15 +00:00 · 2020-12-09 01:30:45 +08:00
parent 404a24e8c8
commit 1abedef20d
3 changed files with 118 additions and 0 deletions
@@ -3,6 +3,7 @@ const webpack = require('webpack');
 const ESLintPlugin = require('eslint-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const WebpackBar = require('webpackbar');
 const paths = require('../../shared/config/paths');
@@ -19,6 +20,7 @@ module.exports = {
            loader: 'babel-loader',
            options: {
              babelrc: true,
+              plugins: [require.resolve('react-refresh/babel')],
            },
          },
        ],
@@ -117,6 +119,7 @@ module.exports = {
    }),
    // This is necessary to emit hot updates (currently CSS only):
    new webpack.HotModuleReplacementPlugin(),
+    new ReactRefreshWebpackPlugin(),
    // Watcher doesn't work well if you mistype casing in a path so we use
    // a plugin that prints an error when you attempt to do this.
    // See https://github.com/facebookincubator/create-react-app/issues/240
@@ -22,6 +22,7 @@
        "@babel/preset-react": "^7.12.7",
        "@babel/preset-typescript": "^7.12.7",
        "@formatjs/cli": "^2.13.15",
+        "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
        "@types/bencode": "^2.0.0",
        "@types/body-parser": "^1.19.0",
        "@types/classnames": "^2.2.11",
@@ -136,6 +137,7 @@
        "react-dropzone": "^11.2.4",
        "react-intl": "^5.10.6",
        "react-measure": "^2.5.2",
+        "react-refresh": "^0.9.0",
        "react-router": "^5.2.0",
        "react-router-dom": "^5.2.0",
        "react-transition-group": "^4.4.1",
@@ -2224,6 +2226,62 @@
        "node": ">=10"
      }
    },
+    "node_modules/@pmmmwh/react-refresh-webpack-plugin": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.3.tgz",
+      "integrity": "sha512-br5Qwvh8D2OQqSXpd1g/xqXKnK0r+Jz6qVKBbWmpUcrbGOxUrf39V5oZ1876084CGn18uMdR5uvPqBv9UqtBjQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-html": "^0.0.7",
+        "error-stack-parser": "^2.0.6",
+        "html-entities": "^1.2.1",
+        "native-url": "^0.2.6",
+        "schema-utils": "^2.6.5",
+        "source-map": "^0.7.3"
+      },
+      "engines": {
+        "node": ">= 10.x"
+      },
+      "peerDependencies": {
+        "@types/webpack": "4.x",
+        "react-refresh": ">=0.8.3 <0.10.0",
+        "sockjs-client": "^1.4.0",
+        "type-fest": "^0.13.1",
+        "webpack": ">=4.43.0 <6.0.0",
+        "webpack-dev-server": "3.x",
+        "webpack-hot-middleware": "2.x",
+        "webpack-plugin-serve": "0.x || 1.x"
+      },
+      "peerDependenciesMeta": {
+        "@types/webpack": {
+          "optional": true
+        },
+        "sockjs-client": {
+          "optional": true
+        },
+        "type-fest": {
+          "optional": true
+        },
+        "webpack-dev-server": {
+          "optional": true
+        },
+        "webpack-hot-middleware": {
+          "optional": true
+        },
+        "webpack-plugin-serve": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules/source-map": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
    "node_modules/@react-dnd/asap": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz",
@@ -13663,6 +13721,15 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/native-url": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/native-url/-/native-url-0.2.6.tgz",
+      "integrity": "sha512-k4bDC87WtgrdD362gZz6zoiXQrl40kYlBmpfmSjwRO1VU0V5ccwJTlxuE72F6m3V0vc1xOf6n3UCP9QyerRqmA==",
+      "dev": true,
+      "dependencies": {
+        "querystring": "^0.2.0"
+      }
+    },
    "node_modules/natural-compare": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -19406,6 +19473,15 @@
        "react-dom": ">0.13.0"
      }
    },
+    "node_modules/react-refresh": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz",
+      "integrity": "sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/react-router": {
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
@@ -26592,6 +26668,28 @@
        "mkdirp": "^1.0.4"
      }
    },
+    "@pmmmwh/react-refresh-webpack-plugin": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.3.tgz",
+      "integrity": "sha512-br5Qwvh8D2OQqSXpd1g/xqXKnK0r+Jz6qVKBbWmpUcrbGOxUrf39V5oZ1876084CGn18uMdR5uvPqBv9UqtBjQ==",
+      "dev": true,
+      "requires": {
+        "ansi-html": "^0.0.7",
+        "error-stack-parser": "^2.0.6",
+        "html-entities": "^1.2.1",
+        "native-url": "^0.2.6",
+        "schema-utils": "^2.6.5",
+        "source-map": "^0.7.3"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+          "dev": true
+        }
+      }
+    },
    "@react-dnd/asap": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.0.tgz",
@@ -35908,6 +36006,15 @@
        "to-regex": "^3.0.1"
      }
    },
+    "native-url": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/native-url/-/native-url-0.2.6.tgz",
+      "integrity": "sha512-k4bDC87WtgrdD362gZz6zoiXQrl40kYlBmpfmSjwRO1VU0V5ccwJTlxuE72F6m3V0vc1xOf6n3UCP9QyerRqmA==",
+      "dev": true,
+      "requires": {
+        "querystring": "^0.2.0"
+      }
+    },
    "natural-compare": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -40415,6 +40522,12 @@
        "resize-observer-polyfill": "^1.5.0"
      }
    },
+    "react-refresh": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz",
+      "integrity": "sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==",
+      "dev": true
+    },
    "react-router": {
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
@@ -71,6 +71,7 @@
    "@babel/preset-react": "^7.12.7",
    "@babel/preset-typescript": "^7.12.7",
    "@formatjs/cli": "^2.13.15",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
    "@types/bencode": "^2.0.0",
    "@types/body-parser": "^1.19.0",
    "@types/classnames": "^2.2.11",
@@ -185,6 +186,7 @@
    "react-dropzone": "^11.2.4",
    "react-intl": "^5.10.6",
    "react-measure": "^2.5.2",
+    "react-refresh": "^0.9.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-transition-group": "^4.4.1",