实践：原有前端项目升级到webpack5

目前，公司的前端的技术栈是React,  前端项目从第三方框架的使用上来说，分为三类：

a. 没有用第三方
b. nextjs + antd
a. umi + antd  (antd pro)

升级的工作量以及难度，取决于架构的封装度和灵活度。
我们从最简单的开始：

1. 没有用第三方框架的项目升级
这个好说，直接按 Module Federation 项目间组件共享 step by step这个笔记里来就好了。

需要特别一提的是，

这时里的 common要注释掉，因为这些共同的东西已经放到 MF的 share里去了，还留在这里的话会有冲突。

2.nextjs + antd 的项目升级
next为我们预留了配制文件的接口，在项目根目录下有个next.config.js文件（如果没有先自行新建一个），这个config文件会以 module.exports 的方式导出我们的配置项。像这个样子：
// next.config.js 

这里我们所要关注配置已经标出，主要是小心设置 MF 的share属性，按上面这个模板配，亲测一般不会有什么问题。

由于next.js是自动生成路由，我们不像1那样，在项目的入口来一个 bootstrap + index 的方式将模块运态引入。但只要用了以上的share配置参数，就可以绕过 bootstrap + index的方式。

当然，这种解决方案在antd pro中也可以用起来，因为我们知道antd pro是配制式路由，项目入口的方式也没有可配置的地方，两都都没有把入口的权限给我们。

3. umi  + antd 项目升级
在 antd 4+ 以及 umi 3+ 下我们对 2的解决方案如法炮制。
配置文件允许在 .umirc.js 或 config/config.js （二选一，.umirc.js 优先）中进行配置，依传统我们在config.js这个文件里，完成我们的配置，umi 3在config.js里为我们提供了 chainWebpack, webpack5这两个属性，前者用来配置FD, 后者用来打来webpack5模式，后者是前提。我们就可以轻松搞定FD了。
./config/config.js

4.目前antd 3 + umi2 的项目
我们的MF是webpakc5才有的功能，umi 3+ 才支持webapck5,  而umi 升级到3+后，antd 3 的写法也有很多要跟着一起变，于是antd最好跟着升级到4+ —— 技术负债总得还 ——！
于是，所要改的地方相对来说比较多，步骤如下：

1）升级antd 到4 , 4相对于3来说，使用上发生了很多变化，很多组件尤其是form，基本上要重写一次了，如果项目中form用得多，那么工作量将会很大。

2）升级umi 到3, 3相对于2来说，精简了很多。主要是改配置文件以及相应组件如： Link\Route的调用方式，相对升级antd来说工作量少一些，但涉及到的面很广，需要全局替换。

3）一些习惯上的改变。这主要是antd4带来的。因为设计理念发生的变化，所以使用上也要变。

综上所述，我们得出一个性价比比较高的解决方案：

新的项目，以及next.js， antd4+的项目，可以很好的进入微前端构架中，而目前 antd3的项目，出于历史原因就只能保持现状，以后慢慢往antd4的项目中迁。渐进式地让antd3消失掉