是 webpack5 新增的功能。

    模块联邦的出现是为了不同开发小组可以共同开发一个或多个应用，类似于微前端的 qiankun 和 single-spa。

    使用模块联邦可以把一个应用，划分成多个块，比如 头部、主体、等，每个应用块由不同的组开发。

    提供给别人使用的应用叫做 remote。
    引用别人的应用叫做 host。
    host 可以使用 remote 暴露出来的模块。

    2. // 微前端的终极解决方法
    4. // 两个项目
    6. // 给别人引用的叫做 remote
    7. // 引用别人的叫做 host
    9. ```js
    10. // remote 给别人用的
    12. import ('./bootstrap')
    14. // bootstrap
    15. import React from 'react'
    16. import App from './app'
    18. // App
    19. import NewsList from './components/NewsList' // 常规开发 新闻列表组件
    20. ... ...
    21. 常规代码
    24. webpack.config.js
    25. // 引入内置插件 模块联邦
    26. const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
    28. output: {
    29.   // 产出资源在HTML模板中引入的路径
    30.   publicPath: 'http://localhost:8080/'
    31. }
    32. plugins: [
    33.   new ModuleFederationPlugin({
    34.     filename: 'remoteEntry.js',
    35.     name: 'remote',
    36.     exposes: { 被远程引用的时候可暴露的资源路径和别名
    37.       './remoteList': './src/remoteList'
    38.     }
    39.   })
    40. ]
    1. // host
    2. // 也要引入 bootstrap
    4. 引用 remote 暴露出来的模块
    5. const RemoteList = React.lazy(() => import('remote/RemoteList'))
    7. <RemoteList />
    9. new ModuleFederationPlugin({
    10.   filename: 'remoteEntry.js',
    11.   name: 'remote',
    12.   remotes: {
    13.     remote: 'remote@http://lcoalhost:3000/remoteEntry.js'
    14.   }
    15. })

    ```