Webpack5 新功能 Module Federation 的作用就是：
作用：让不同项目的模块可以通过远程提供给其它项目使用
而这个功能在一个叫ModuleFederationPlugin 插件内实现
ModuleFederationPlugin 插件
Module Federation 模块共享整体是通过ModuleFederationPlugin这个插件串联起来的。
Remote: 提供模块共享服务
Host: 获取共享的模块
Module Federation 原理图：
Remote 配置：
//webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
module.exports = {
...
devServer: {
port: 8080
},
plugins: [
new ModuleFederationPlugin({
name:'remoteVar', //必须，唯一 ID，作为输出的模块名，使用的时通过 ${name}/${expose} 的方式使用；
filename:'remoteEntry.js', // 构建出来的文件名
exposes:{ //可选，表示作为 Remote 时，export 哪些属性被消费；
'./NewsList':'./src/NewsList'
},
shared:['react','react-dom'] //可选，优先用远程的依赖，如果远程版本不对或没有，再用自己的；
})
]
}
Host 配置：
//webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
module.exports = {
...
devServer: {
port: 8081
},
plugins: [
new ModuleFederationPlugin({
remotes:{ //可选，表示作为 Host 时，去消费哪些 Remote；
remote:'remoteVar@http://localhost:8080/remoteEntry.js'
hostRemote:'hostRemoteVar@http://localhost:8082/remoteEntry.js'
},
shared:['react','react-dom']
})
]
}
消费导入的远程remote：
let RemoteNewList = await import('remote/NewsList');
let RemoteSlides = await import('hostRemote/Slides');
Host / Remote 配置：
//webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
module.exports = {
...
devServer: {
port: 8082
},
plugins: [
new ModuleFederationPlugin({
name:'hostRemoteVar',
filename:'remoteEntry.js', // 构建出来的文件名
remotes:{ //可选，表示作为 Host 时，去消费哪些 Remote；
remote:'remoteVar@http://localhost:8080/remoteEntry.js',
},
exposes:{ //可选，表示作为 Remote 时，export 哪些属性被消费；
'./Slides':'./src/Slides'
},
shared:['react','react-dom']
})
]
}
消费导入的远程remote：
let RemoteNewList = await import('remote/NewsList');
Module Federation 模块联邦原理：
在 window 上挂载一个 remote 全局变量
// get 方法获取远程的代码
window.remote.get('./NewsList').then(() => {}) // 内部通过 jsonp 拿到远程的js文件
