webpack5实现局部更新

传送门：
https://www.npmjs.com/package/react-hot-loader

安装依赖

npm install react-hot-loader @hot-loader/react-dom

babel.config.js

添加react-hot-loader/babel配置
如果需要使用@hot注解(本配置不需要)，需要安装@babel/plugin-proposal-decorators

// babel for jest
module.exports = {
    presets: [
        ['@babel/preset-env'],
        [
            '@babel/preset-react',
            {
                runtime: 'automatic'
            }
        ]
    ],
    plugins: [
        '@babel/plugin-transform-runtime',
        '@babel/plugin-proposal-class-properties',
        [
            '@babel/plugin-proposal-decorators',
            {
                legacy: true
            }
        ],
        'react-hot-loader/babel'
    ]
};

webpack.dev.js

增加alias和entry配置(仅多页应用配置即可，单页应用不生效)
1、entry 中添加react-hot-loader/patch
2、增加alias

     resolve: {
            alias: {
                ...commonConfig.resolve.alias,
                'react-dom': '@hot-loader/react-dom'
            }
        },

针对单页应用配置

最好是在路由中配置
对组件进行包裹hot(module)(component)

/**
 * @param App 入口组件
 * @param menu 组件菜单信息 code：菜单标识，name:页面标题
 * @param action
 * @param initialState
 * @returns {JSX.Element}
 * @constructor
 */

import React from 'react';
import DMPage from './DMPage';
import { hot } from 'react-hot-loader';

const MainLayout = props => {
    const { route } = props;
    const { menu } = route;
    // 增加局部更新逻辑
    const Comp = hot(module)(route.component);
    return menu?.remove ? (
        <Comp {...props} />
    ) : (
        <DMPage {...menu}>
            <Comp {...props} />
        </DMPage>
    );
};

export default MainLayout;