微前端之 Webpack5 的 module federation

最新推荐文章于 2025-05-26 16:29:42 发布

原创最新推荐文章于 2025-05-26 16:29:42 发布 · 479 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #webpack #javascript #微前端

微前端专栏收录该内容

1 篇文章

订阅专栏

微前端之 Webpack5 的 module federation

代码在 https://github.com/GoldenaArcher/webpack5-study-case 的 module federation branch 下面，关于其他的配置，可以看 webpack5 查漏补缺系列。

目前的代码配置是这样的：

在这里插入图片描述

简单的说一下就是，目前有 3 个项目：

hello-world，也就是 home

remote
lion

remote
dashboard

host

这里的 host 会使用 remote 开放的组件，也就是 home 和 lion 两个页面：

在这里插入图片描述

这里导出的是两个页面，但是是机上使用 webpack 也可以导出方法/库让 host 去使用。

remote 配置

remote 的配置如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  entry: { lion: './src/lion.js' },
  output: {
    filename: '[name].[contenthash:8].js',
    path: path.resolve(__dirname, 'dist/'),
    // default for webpack5: publicPath: 'auto'
    // default for webpack4: publicPath: ''
    publicPath: 'http://localhost:9002/',
    clean: true,
  },
  devServer: {
    port: 9002,
    static: {
      directory: path.resolve(__dirname, './dist'),
    },
    devMiddleware: {
      index: 'lion.html',
      writeToDisk: true, // by default is false
    },
  },
  // ...
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      filename: 'lion.html',
      template: 'src/page-template.hbs',
      title: 'Cute lion',
      description: 'Very cute lion cub',
      chunks: ['lion'],
    }),
    new ModuleFederationPlugin({
      name: 'LionApp',
      filename: 'remoteEntry.js',
      exposes: {
        './LionPage': './src/components/lion-page/lion-page.js',
      },
    }),
  ],
};

省略了一些不相关的配置，这里最重要的几个配置包括：

publicPath

这里是 webpack 向外暴露的路由，如这个案例中暴露的是 http://localhost:9002/，那么只要使用了 module federation 的插件，那么别的项目就可以使用暴露的对应功能

另外就是，绝对不能忘了最后一个 /，因为忘了这个我 debug 了好久为什么资源无法访问……
devServer

开发用
ModuleFederationPlugin

这里的配置决定了 remote 中有什么项目会被暴露出去，截至目前的版本，所有的选项都是可选的：

关于 shared、runtime 这种暂时还没碰到的就不说了，这里讲一下用到的属性：
- name
  
  容器的名字
- filename
  
  文件名，即其他人可以通过 XXXX/filename 访问的那个文件名，如：
  
  在 9000 这个端口所访问的文件就是 9001/remoteEntry.js
- exposes
  
  容器需要暴露的功能，接受 3 个参数类型，字符串，暴露的对象，以及暴露对象的数组，这里使用的就是数组类型。

remote 其实可以导出任何一个东西，如果想自己从 0 开始配置的话，也可以先试着从 remote 导出一个函数让别的 host 去使用。

host

host 配置

new ModuleFederationPlugin({
  name: 'App',
  remotes: {
    HelloWorldApp: 'HelloWorldApp@http://localhost:9001/remoteEntry.js',
    LionApp: 'LionApp@http://localhost:9002/remoteEntry.js',
  },
}),

这里没有放其他的配置是因为 dashboard 只是作为 consumer 去使用别的 remote 分享的功能。一个 host 同样也可以作为 remote 向别的项目分享功能。

这里 remotes 就是接受别的 remote 分享的功能，格式就是 {name}@{publicPath+filename}

host 使用 remotes

因为所有的 remotes 都是异步代码，因此可以使用 callback 或者 async/await，说句题外话，top level await 已经被在 ES2022 中 release 了，并且大部分浏览器支持了，感兴趣的可以试试看：

在这里插入图片描述

具体的代码为：

import('HelloWorldApp/HelloWorldPage').then((HelloWorldPageModule) => {
  // const HelloWorldPage = HelloWorldPageModule.default;
  const { HelloWorldPage } = HelloWorldPageModule;
  new HelloWorldPage().render();
});