fix: page doesn't reload when can't hot update

tjx666 · Apr 13, 2020 · b721621 · b721621
1 parent 8a533a1
commit b721621
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 29 deletions.
diff --git a/scripts/configs/webpack.common.ts b/scripts/configs/webpack.common.ts
@@ -50,12 +50,7 @@ const htmlMinifyOptions: HtmlMinifierOptions = {
 const commonConfig: Configuration = {
     cache: true,
     context: PROJECT_ROOT,
-    entry: [
-        // reload=true 设置 webpack 无法热更新时刷新整个页面，overlay=true 设置编译出错时在网页中显示出错信息遮罩
-        'webpack-hot-middleware/client?reload=true&overlay=true',
-        'react-hot-loader/patch',
-        resolve(PROJECT_ROOT, './src/index.tsx'),
-    ],
+    entry: ['react-hot-loader/patch', resolve(PROJECT_ROOT, './src/index.tsx')],
     output: {
         publicPath: '/',
         path: resolve(PROJECT_ROOT, './dist'),
@@ -104,18 +99,15 @@ const commonConfig: Configuration = {
                 };
             },
         }),
-        new CopyPlugin(
-            [
-                {
-                    context: PROJECT_ROOT,
-                    from: 'public/*',
-                    to: resolve(PROJECT_ROOT, './dist'),
-                    toType: 'dir',
-                    ignore: ['index.html'],
-                },
-            ],
-            { context: resolve(PROJECT_ROOT, './public') },
-        ),
+        new CopyPlugin([
+            {
+                context: resolve(PROJECT_ROOT, './public'),
+                from: '*',
+                to: resolve(PROJECT_ROOT, './dist'),
+                toType: 'dir',
+                ignore: ['index.html'],
+            },
+        ]),
     ],
     module: {
         rules: [
@@ -184,7 +176,10 @@ const commonConfig: Configuration = {
 
 if (__DEV__) {
     // 开发环境下注入热更新补丁
-    (commonConfig.entry as string[]).unshift(`webpack-hot-middleware/client?path=${HMR_PATH}`);
+    // reload=true 设置 webpack 无法热更新时刷新整个页面，overlay=true 设置编译出错时在网页中显示出错信息遮罩
+    (commonConfig.entry as string[]).unshift(
+        `webpack-hot-middleware/client?path=${HMR_PATH}&reload=true&overlay=true`,
+    );
 }
 
 export default commonConfig;
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,26 +1,36 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { hot } from 'react-hot-loader/root';
 
 import './App.scss';
 
-const App = () => {
-    const [count, setCount] = React.useState(0);
+interface CounterProps {
+    initialCount?: number;
+}
+
+const Counter = memo(function Counter({ initialCount = 0 }: CounterProps) {
+    const [count, setCount] = React.useState(initialCount);
 
     const add = () => {
         setCount(count + 1);
     };
 
+    return (
+        <div className="counter">
+            <input type="text" value={count} readOnly />
+            <button type="button" onClick={add}>
+                +
+            </button>
+        </div>
+    );
+});
+
+function App() {
     return (
         <div className="app">
             <h2 className="title">react typescript boilerplate</h2>
-            <div className="counter">
-                <input type="text" value={count} readOnly />
-                <button type="button" onClick={add}>
-                    +
-                </button>
-            </div>
+            <Counter />
         </div>
     );
-};
+}
 
 export default hot(App);