为什么需要学习webpack5 module Federation原理呢？因为EMP微前端方案正是基于该革命性功能进行的，具有历史突破意义。通过本文，可以让你深入学习webpack5 module Federation原理，掌握EMP微前端方案的底层基石，更好使用和应用EMP微前端方案。
最近webpack5正式发布，其中推出了一个非常令人激动的新功能，即今日的主角——Module Federation（以下简称为mf），下面将通过三个方面（what，how，where）来跟大家一起探索这个功能的奥秘。
一. 是什么Module Federation中文直译为“模块联邦”，而在webpack官方文档中，其实并未给出其真正含义，但给出了使用该功能的motivation， 即动机，原文如下
Multiple separate builds should form a single application. These separate builds should not have dependencies between each other, so they can be developed and deployed individually. This is often known as Micro-Frontends, but is not limited to that.翻译成中文即
多个独立的构建可以形成一个应用程序。这些独立的构建不会相互依赖，因此可以单独开发和部署它们。 这通常被称为微前端，但并不仅限于此。结合以上，不难看出，mf实际想要做的事，便是把多个无相互依赖、单独部署的应用合并为一个。通俗点讲，即mf提供了能在当前应用中远程加载其他服务器上应用的能力。对此，可以引出下面两个概念：
host：引用了其他应用的应用
remote：被其他应用所使用的应用
鉴于mf的能力，我们可以完全实现一个去中心化的应用部署群：每个应用是单独部署在各自的服务器，每个应用都可以引用其他应用，也能被其他应用所引用，即每个应用可以充当host的角色，亦可以作为remote出现，无中心应用的概念。
配置示例：
const HtmlWebpackPlugin = require("html-webpack-plugin"); const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); module.exports = { // 其他webpack配置... plugins: [ new ModuleFederationPlugin({ name: 'empBase', library: { type: 'var', name: 'empBase' }, filename: 'emp.js', remotes: { app_two: "app_two_remote", app_three: "app_three_remote" }, exposes: { './Component1': 'src/components/Component1', './Component2': 'src/components/Component2', }, shared: ["react", "react-dom","react-router-dom"] }) ] }