一文大白话讲清楚webpack进阶——8——Module Federation

一文大白话讲清楚webpack进阶——8——Module Federation

1. 啥是Module Federation

• Module是模块，Federation是捆绑，Module Federation就是模块联邦，
• 那问题来了谁跟谁联邦，怎么联邦
• 第一个问题，可以概括为把别人的微前端绑定到自己的项目中，作为本项目的一个模块，从而实现代码共享
• 第二个问题，怎么绑，先不着急回答，先讲我们之前用第三方库代码怎么用，得通过npm或者yarn等包管理工具下载到本地，然后再项目中引用。也就是说，我们在项目的中必须要有这个物理包，然后引入。再说模块联邦怎么绑定，一句话，远程绑定，换句话说就是不同把第三方库代码下载到本地，直接上URL。
• Module Federation是webpack5引入的新特性，它允许不同的web应用在运行时共享代码，不需要传统的打包或者发布过程中的物理共享，这表示每个微应用都可以独立开发，构建，部署，还能轻松地实现共享组件，库甚至是业务逻辑。可以说，彻底改变了微前端的结构实现

2. 这里讲两个基础概念

• 1. 容器应用
• 作为微前端结构的宿主，负责加载和协调哥哥微应用，说白了就是在你的项目中，既然要联邦很多微应用，那总得有一个负责引用和管理这些微应用的东西吧，这个就是
• 2. 远程应用
• 说白了就是你项目中引用的微应用，是独立的，可以暴露自己的模块给其他应用使用，当然也可以作为容器应用引用来自其他英勇的模块。
• 一句话，容器应用和远程应用我中有你，你中有我，我可以是你，你也可以是我，就看你是用别人的，还是被别人用的

3. 容器应用配置

• 大白话，就是你怎么应用别人
• 我们在webpack.config.js中通过ModuleFederationPlugin来声明远程微应用的来源

const ModuleFederationPlugin=require('webpack/lib/container/ModuleFederationPlugin')
module.exports={
    plugins:[
        new ModuleFederatoionPlugin({
            name:'container',
            remotes:{//引用的远程微应用的名称和远程入口文件的URL
                app1:'app1/@http:xxx.js',
                app2:'app2/@http:yyy.js'
            },
            shared:{//指明了哪些模块应该作为单例共享
                react:{
                    singleton:true
                }
            }
        })
    ]
}

4. 远程应用配置

• 大白话就是，你怎么被别人使用
• 我们在webpack.config.js中同样使用ModuleFederationPlugin进行配置，但这次不是引用别人，还是暴露自己，被别人使用

const ModuleFederationPlugin=require('webpack/lib/container/ModuleFederationPlugin')
module.exports={
    plugins:[
        new MoudleFederationPlugin({
            name:'app1',
            filename:'xxx.js',
            exposes:{//定义哪些模块将对外暴露
                './MyCompent':'./src/components/MyCompent',//声明MyComponent组件可以被容器应用导入和shiyong
            },
            shared:{
                react:{
                    singlerton:true
                }
            }
        })
    ]
}

5. 模块使用

• 通过容器应用配置MyComponent组件后，我们可以直接在本地项目中导入远程引用暴露出来的MyComponent模块

import MyComponent from 'app1/MyComponet'
const fn=()=>{
    return (
        <div>
            <MyCompent/>
        </div>
    )
}
export default fn

5. ModuleFederation好在哪里

1. 独立开发和部署，每个微应用都可以独立开发，构建恶化部署，大大提高开发效率和部署灵活性
2. 实现按需加载，应用在首屏加载上，能提升性能
3. 良好的版本管理和隔离，各微应用独立维护版本，避免版本冲突问题
4. 抑郁维护，Module Federation有较好的松耦合性，使得添加和移除微应用变得简单而方便

6. ModuleFederation实战

• 看这篇文章
• ModuleFederation实战