Webpack5 新功能 Module Federation 用法

Myth丶恋晨 2022-12-31 01:12 167阅读 0赞

## Webpack5 新功能 Module Federation 的作用就是： ##

**让不同项目的模块可以通过远程提供给其它项目使用** 而这个功能在一个叫`ModuleFederationPlugin` 插件内实现

## ModuleFederationPlugin 插件 ##

Module Federation 模块共享整体是通过`ModuleFederationPlugin`这个插件串联起来的。

**Remote:** **提供模块共享服务**  
**Host:** **获取共享的模块**

**原理图如下：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4_size_16_color_FFFFFF_t_70]

## 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 的依赖，如果 Host 没有，再用自己的；
        })
      ]
    }

## 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 RemoteNewList = 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 详情][Module Federation] ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4_size_16_color_FFFFFF_t_70]: /images/20221120/81c1337ca49d4bee9e4c9f0cee8ddd16.png
[Module Federation]: https://developer.aliyun.com/article/755252