feat: react-hot-loader热更新\支持懒加载模块

babel.config.js

@@ -16,7 +16,7 @@ module.exports = (api) => {
     ],
     "@babel/preset-react"
   ]
-  const plugins = [];
+  const plugins = ["react-hot-loader/babel"];
 
   return { presets, plugins }
 }

config/utils/index.js

@@ -1,6 +1,9 @@
 const path = require('path');
+const { ROOT_PATH } = require('./paths');
+const pkg = require(`${ROOT_PATH}/package.json`);
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
+
 exports.resolve = (dir) => {
   return path.resolve(__dirname, '../../', dir)
 }
@@ -69,3 +72,10 @@ exports.styleLoaders = function (options) {
   }
   return output;
 };
+
+exports.supportReactHotReload = function() {
+  const dependencyFlag = Object.keys(pkg.dependencies || {}).includes('react-hot-loader');
+  const devDependencyFlag = Object.keys(pkg.devDependencies || {}).includes('react-hot-loader');
+
+  return dependencyFlag || devDependencyFlag;
+}

config/utils/paths.js

@@ -0,0 +1,2 @@
+const path = require('path');
+exports.ROOT_PATH = path.resolve(process.cwd());

config/webpack.common.js

@@ -1,9 +1,9 @@
-const { resolve } = require('./utils')
+const { resolve, supportReactHotReload } = require('./utils')
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
   entry: {
-    index: resolve('src/index.js')
+    index: (supportReactHotReload() ? ['react-hot-loader/patch'] :[]).concat([resolve('src/index.js')]),
   },
   output: {
     filename: '[name].[contenthash:8].js',

config/webpack.dev.js

@@ -1,6 +1,6 @@
 const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
-const { styleLoaders } = require('./utils')
+const { styleLoaders } = require('./utils');
 
 module.exports = merge(common, {
   mode: 'development',

package.json

@@ -26,6 +26,7 @@
     "less-loader": "^7.0.2",
     "mini-css-extract-plugin": "^1.0.0",
     "postcss-loader": "^4.0.4",
+    "react-hot-loader": "^4.13.0",
     "style-loader": "^2.0.0",
     "terser-webpack-plugin": "^5.0.0",
     "url-loader": "^4.1.1",

src/App.js

@@ -1,3 +1,5 @@
+// import 'react-hot-loader' in your main file (before React)
+import { hot } from 'react-hot-loader/root';
 import React from 'react';
 import Routes from './routes'
 // antd 4 默认支持基于 ES modules 的 tree shaking，对于 js 部分，直接引入 import { Button } from 'antd' 就会有按需加载的效果。
@@ -6,12 +8,12 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
 
 function App() {
   return (
-    <div className="App">Hello World
-      <Button type="primary" onClick={() => message.info('welcome')}>欢迎</Button>
+    <div className="App">Hello World1
+      <Button type="primary" onClick={() => message.info('welcome')}>欢迎1</Button>
       <DatePicker />
       <Routes />
     </div>
   );
 }
 
-export default App;
+export default hot(App);

src/containers/home/index.js

@@ -15,7 +15,7 @@ class Home extends Component{
   render() {
     return(
       <div className='the-home'>
-        <h3>home</h3>
+        <h3>home12</h3>
         {
           'isValid:' + isValid(1)
         }

src/routes/index.js

@@ -1,22 +1,26 @@
-import React from 'react';
+import React, { Suspense, lazy } from 'react';
 import {
   BrowserRouter, Route, Redirect, Switch
 } from 'react-router-dom';
-import loadable from '@loadable/component';
+// import loadable from '@loadable/component';
 
-const Home = loadable(() => import('@/containers/home'));
-const Detail = loadable(() => import('@/containers/detail'));
+const Home = lazy(() => import('@/containers/home'));
+const Detail = lazy(() => import('@/containers/detail'));
+
+// import Home from '@/containers/home';
+// import Detail from '@/containers/detail';
 
 const ROOT_PATH = '';
 
 const routes = () => (
   <BrowserRouter basename={ROOT_PATH}>
-    <Switch>
-      <Redirect exact from='/' to='home' />
-      <Route path='/home' component={Home} />
-      <Route path='/detail' component={Detail} />
-    </Switch>
-
+    <Suspense fallback={<div>Loading...</div>}>
+      <Switch>
+        <Redirect exact from='/' to='home' />
+        <Route path='/home' component={Home} />
+        <Route path='/detail' component={Detail} />
+      </Switch>
+    </Suspense>
   </BrowserRouter>
 )
 

yarn.lock

@@ -2294,6 +2294,10 @@ dom-serializer@0:
     domelementtype "^2.0.1"
     entities "^2.0.0"
 
+dom-walk@^0.1.0:
+  version "0.1.2"
+  resolved "https://registry.npm.taobao.org/dom-walk/download/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
+
 domelementtype@1, domelementtype@^1.3.1:
   version "1.3.1"
   resolved "https://registry.npm.taobao.org/domelementtype/download/domelementtype-1.3.1.tgz?cache=0&sync_timestamp=1600028501093&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdomelementtype%2Fdownload%2Fdomelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
@@ -2690,6 +2694,10 @@ fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.npm.taobao.org/fast-json-stable-stringify/download/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
 
+fast-levenshtein@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npm.taobao.org/fast-levenshtein/download/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+
 faye-websocket@^0.10.0:
   version "0.10.0"
   resolved "https://registry.npm.taobao.org/faye-websocket/download/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
@@ -2956,6 +2964,13 @@ global-prefix@^3.0.0:
     kind-of "^6.0.2"
     which "^1.3.1"
 
+global@^4.3.0:
+  version "4.4.0"
+  resolved "https://registry.npm.taobao.org/global/download/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
+  dependencies:
+    min-document "^2.19.0"
+    process "^0.11.10"
+
 globals@^11.1.0:
   version "11.12.0"
   resolved "https://registry.npm.taobao.org/globals/download/globals-11.12.0.tgz?cache=0&sync_timestamp=1596709342600&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fglobals%2Fdownload%2Fglobals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
@@ -3123,7 +3138,7 @@ history@^4.9.0:
     tiny-warning "^1.0.0"
     value-equal "^1.0.1"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.npm.taobao.org/hoist-non-react-statics/download/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   dependencies:
@@ -3810,7 +3825,7 @@ loader-runner@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npm.taobao.org/loader-runner/download/loader-runner-4.1.0.tgz#f70bc0c29edbabdf2043e7ee73ccc3fe1c96b42d"
 
-loader-utils@^1.2.3, loader-utils@^1.4.0:
+loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npm.taobao.org/loader-utils/download/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
   dependencies:
@@ -4028,6 +4043,12 @@ mimic-response@^2.0.0, mimic-response@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npm.taobao.org/mimic-response/download/mimic-response-2.1.0.tgz#d13763d35f613d09ec37ebb30bac0469c0ee8f43"
 
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.npm.taobao.org/min-document/download/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  dependencies:
+    dom-walk "^0.1.0"
+
 mini-create-react-context@^0.4.0:
   version "0.4.0"
   resolved "https://registry.npm.taobao.org/mini-create-react-context/download/mini-create-react-context-0.4.0.tgz#df60501c83151db69e28eac0ef08b4002efab040"
@@ -4673,7 +4694,11 @@ process-nextick-args@^2.0.0, process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.npm.taobao.org/process-nextick-args/download/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
 
-prop-types@^15.5.10, prop-types@^15.6.2:
+process@^0.11.10:
+  version "0.11.10"
+  resolved "https://registry.npm.taobao.org/process/download/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+
+prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.7.2"
   resolved "https://registry.npm.taobao.org/prop-types/download/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   dependencies:
@@ -5089,6 +5114,19 @@ react-dom@^16.14.0:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
+react-hot-loader@^4.13.0:
+  version "4.13.0"
+  resolved "https://registry.npm.taobao.org/react-hot-loader/download/react-hot-loader-4.13.0.tgz?cache=0&sync_timestamp=1600779794088&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-hot-loader%2Fdownload%2Freact-hot-loader-4.13.0.tgz#c27e9408581c2a678f5316e69c061b226dc6a202"
+  dependencies:
+    fast-levenshtein "^2.0.6"
+    global "^4.3.0"
+    hoist-non-react-statics "^3.3.0"
+    loader-utils "^1.1.0"
+    prop-types "^15.6.1"
+    react-lifecycles-compat "^3.0.4"
+    shallowequal "^1.1.0"
+    source-map "^0.7.3"
+
 react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.npm.taobao.org/react-is/download/react-is-16.13.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-is%2Fdownload%2Freact-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"