模块联邦

webpack作为前端工程师广泛使用的打包工具，在整个前端生态中具有不可撼动的地位。目前，在最新的webpack5版本中带来了许多新特性，其中模块联邦倍受关注。

什么是模块联邦

module federation 模块联邦，它可以让多个独立构建的应用之间，动态的调用彼此的模块。这种运行机制，可以让我们轻松的拆分应用，真正做到跨应用的模块共享。

重要概念

host： webpack构建可以是remote远程服务的提供方。

remote：也可以作为host主机的服务消费方。

bidirectional-hosts：亦可作为双向主机，同时兼顾remote和host。

container：每个构建都充当一个容器，能够通过从对应的容器中加载模块来访问其它容器暴露出来的模块。

简单示例

app1 配置：

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ModuleFederationPlugin } = require("webpack").container; // 通过使用webpack内置插件构建模块

module.exports = (env = {}) => ({
  // 其它 webpack 配置...
  plugins: [
    new ModuleFederationPlugin({
      name: "app1", // 当前应用的名称，需要全局维一
      filename: "remoteEntry.js", // 共享模块的入口文件
      library: { type: 'var', name: 'app1' }, // 共享模块的全局引用
      exposes: { // 导出的模块，只有在此申明的模块才可以作为远程依赖被使用
        "./Button": "./src/components/Button",
      },
      shared: ['vue', 'element-ui'] // 远程加载的模块对应的依赖使用本地项目的依赖
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./public/index.html"),
    })
  ],
  
  devServer: {
    port: 3001,
  }
});

app2 配置：

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ModuleFederationPlugin } = require("webpack").container; // 通过使用webpack内置插件构建模块

module.exports = (env = {}) => ({
  // 其它 webpack 配置...
  plugins: [
    new ModuleFederationPlugin({
      name: 'app2',
      filename: "remoteEntry.js",
      remotes: { // 引入远程应用的导出的模块， name@host address/filename.
        app1: 'app1@http://localhost:3001/remoteEntry.js'
      },
      shared: ['vue', 'element-ui'] // 抽离的依赖与其它应用保持一致
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "./public/index.html"),
    })
  ],
});