是什么
是一个用来解决多个应用之间代码共享的问题，可以让我们更加优雅的实现跨应用的代码共享的webpack插件。
解决了什么
解决如何高效实现模块共享的问题
怎么发展来的
1. npm
这是最原始简单的方法，也是我们最常用的方法。
缺点： npm发包需要经历构建，发布，引用三阶段，过程繁琐。
2. UMD模式打包
根据传入的参数，判断是执行AMD模式还是CommonJs模式。
缺点：包体积很大，不同库之间容易冲突
3. 微服务
可以做到多个独立的构建组成一个应用程序，这些独立的构建之间不存在依赖关系，因此可以单独开发和部署它们。
缺点：独立的构建一多，就需要多次部署维护，对运维来说工作量很大。另外微服务一般是子应用独立打包，耦合度很低，但是没办法做到公共模块共用。
4. MouduleFedration
直接将一个应用的包应用于另一个应用，同时具备整体应用一起打包的公共依赖抽取能力。（因为之前的方案，大都是无法抽离出公共模块，导致整体打包很慢）。让应用具备模块化输出能力，其实开辟了一种新的应用形态，即 “中心应用”，这个中心应用用于在线动态分发 Runtime 子模块，并不直接提供给用户使用。
有什么重要的概念
- webpack构建：一个独立项目通过webpack打包编译而产生资源包。
- remote：一个暴露模块供其他webpakc构建消费的webpack构建。（生产者）
- host：一个消费其他remote模块的webpack构建。（消费者）
一个构件既可以是生产者，也可以是消费者。
怎么用
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
// other webpack configs...
plugins: [
new ModuleFederationPlugin({
name: "app_one_remote",
remotes: {
app_two: "app_two_remote",
app_three: "app_three_remote"
},
exposes: {
AppContainer: "./src/App"
},
shared: ["react", "react-dom", "react-router-dom"]
}),
new HtmlWebpackPlugin({
template: "./public/index.html",
chunks: ["main"]
})
]
};
配置说明
- name 当前应用名称，需要全局唯一。(到时候别的应用来消费就是根据这个name找到这个应用的)
- remotes 可以将其他项目的 name 映射到当前项目中。（消费）
- exposes 表示导出的模块，只有在此申明的模块才可以作为远程依赖被使用。（生产）
- shared 是非常重要的参数，制定了这个参数，可以让远程加载的模块对应依赖改为使用本地项目的 React 或 ReactDOM。如果不配就容易出现多次加载的情况（也就是说消费者知道生产者自己拥有这样的模块时才会用到这个配置）
使用场景
一共有三个微应用:lib-app、component-app、main-app，角色分别是：
- lib-appas remote,暴露了两个模块react和react-dom
- component-app as remote and host,依赖lib-app,暴露了一些组件供main-app消费
- main-app as host,依赖lib-app和component-app
lib-app
module.exports = {
//...省略
plugins: [
new ModuleFederationPlugin({
name: "lib_app",
filename: "remoteEntry.js",
exposes: { "./react":"react", "./react-dom":"react-dom" }
})],
//...省略
}
除去生成的map文件，此次编译后生成四个文件：main.js、remoteEntry.js、...react_index.js、...react-dom_index.js；
- 第一个是本项目的入口文件（该项目只是暴露接口，所以该文件为空）
- 第二个是远程入口文件，其他webpack构建使用、访问本项目暴露的模块时，须通过它来加载
- 第三个和第四个是暴露的模块，供其他项目消费
component-app
module.exports = {
//...省略
plugins:[
new ModuleFederationPlugin({
name: "component_app",
filename: "remoteEntry.js",
exposes: {
"./Button":"./src/Button.jsx"
},
remotes:{
"lib-app":"lib_app@http://localhost:3000/remoteEntry.js"
}
}),
]
}
这里依赖了lib-app，后面的值就是lib-app ModuleFederation应用的入口文件地址。暴露出来Button组件。
main-app
//webpack.config.js
module.exports = {
//...省略
plugins:[
new ModuleFederationPlugin({
name: "main_app",
filename: "remoteEntry.js",
remotes:{
"lib-app":"lib_app@http://localhost:3000/remoteEntry.js",
"component-app":"component_app@http://localhost:3001/remoteEntry.js"
}
}),
new HtmlWebpackPlugin({
template: "./public/index.html",
})
]
}
这里和上面的ModuleFederation配置基本一样，重点是建立依赖之后怎么用？
由于需要等待基础模块加载完毕，所以需要配置懒加载入口bootstrap.js.
bootstrap.js
import ReactDOM from 'lib-app/react-dom';
import React from 'lib-app/react'
ReactDOM.render(<App />, document.getElementById("app"));
App.jsx
import Button from 'component-app/Button'
export default class App extends React.Component{
constructor(props) {
super(props)
//省略...
}
//省略...
render(){
return (<div>
//省略...
</div>)
}
}
