2.2 改造 micro-front-end-1
cd micro-front-end-1
先安装webpack相关的依赖：
yarn add webpack webpack-cli webpack-server html-webpack-plugin webpack-dev-server -D
删除 micro-front-end-1/src/index.js 中的所有代码，并将其替换为：
在 micro-front-end-1 项目根目录中创建 webpack.config.js：
module.exports = { mode: "development", };
在 package.json 中加入 script：
然后使用 webpack 打包 micro-front-end-1 代码：
yarn webpack
将会在根目录生成一个 dist 的产物文件夹：
接着添加 webpack server 配置：
const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { mode: "development", devServer: { port: 8081, }, plugins: [ new HtmlWebpackPlugin({ template: "./public/index.html", }), ], };
修改 package.json 中 webpack script：
"scripts": { "webpack": "webpack serve", // ... },
清理掉 public/index.html 中的一些无用的代码：
<!DOCTYPE html> <html lang="en"> <head> </head> <body> <div id="root"></div> </body> </html>
并将 src/index.js 中的代码改成：
document.querySelector("#root").innerHTML = `<h1>Micro-Front-End-1</h1>`;
然后运行 yarn webpack，这将启动一个位于 8081端口 的本地服务，在控制台，你就可以看到我们在 src/index.js 中写的代码：
2.3 改造 Container
cd container
安装一些必要的依赖
yarn add webpack webpack-cli webpack-server html-webpack-plugin -D
在 container 的根目录也配置一个 webapck.config.js 文件：
const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { mode: "development", devServer: { port: 8080, }, plugins: [ new HtmlWebpackPlugin({ template: "./public/index.html", }), ], };
也在 package.json 的 scripts 中加入：
"webpack": "webpack serve",
改造 public/index.html 和 src/index.js：
<!DOCTYPE html> <html lang="en"> <head> </head> <body> <div id="root"></div> </body> </html>
console.log("Container");
执行 yarn webpack，打开 http://localhost:8080/：
2.4 在 container 中引入 micro-front-end-1
2.4.1 引入 Module Federation
在 micro-front-end-1/webpack.config.js 中加入：
const HtmlWebpackPlugin = require("html-webpack-plugin"); const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); module.exports = { mode: "development", devServer: { port: 8081, }, plugins: [ new ModuleFederationPlugin({ name: "microFrontEnd1", filename: "remoteEntry.js", exposes: { "./MicroFrontEnd1Index": "./src/index", }, }), new HtmlWebpackPlugin({ template: "./public/index.html", }), ], };
这将从 micro-front-end-1 暴露出 index.js。（注意：这里使用了驼峰命名法）
2.4.2 在 container 中引入
在 container/webpack.config.js 中添加：
const HtmlWebpackPlugin = require("html-webpack-plugin"); const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); module.exports = { mode: "development", devServer: { port: 8080, }, plugins: [ new ModuleFederationPlugin({ name: "container", remotes: { microFrontEnd1: "microFrontEnd1@http://localhost:8081/remoteEntry.js", }, }), new HtmlWebpackPlugin({ template: "./public/index.html", }), ], };
然后，将 container/src/index.js 重命名为 container/src/bootstrap.js，并导入microFrontEnd1/MicroFrontEnd1Index（这是为了异步运行文件，直到它从 micro-front-end-1 获得数据到容器中。）
// container/src/bootstrap.js import "microFrontEnd1/MicroFrontEnd1Index"; console.log("Container!");
创建一个新的 container/src/index.js 并导入 bootstrap.js：
// container/src/index.js import("./bootstrap");
重新运行两个项目：
打开控制台，选择网络，禁用缓存，如下图所示：
刷新页面：
右键单击名称旁边的标题，从菜单中选择Url，以显示被调用的URL
整个流程是这样的：
- 它首先在
http://localhost:8080/main.js上调用main.js，这就是容器。 - 在
http://localhost:8081/remoteEntry.js上调用了remoteEntry.js。这是micro-front-end-1 - 再次回到容器中调用
bootstrap - 最后从
micro-front-end-1（index.js）调用src_index_js.js，将其输出渲染在屏幕上
所有这些都基于 ModuleFederationPlugin：
webpack 使用 micro-front-end-1/webpack.config.js 的这个配置来创建http://localhost:8081/remoteEntry.js 和 http://localhost:8081/src_index_js.js。
然后 container/webpack.config.js 上的配置告诉服务器如何获取 http://localhost:8081/remoteEntry.js：
在 http://localhost:8081/remoteEntry.js 里获取 src_index_js.js 所需的信息：
模块联邦允许 JavaScript 在运行时将代码从 micro-front-end-1 动态地导入到 container 中。
2.5 改造并引入 micro-front-end-2
2.5.1 改造 micro-front-end-2
cd mirco-front-end-2
安装必要的依赖：
yarn add webpack webpack-cli webpack-server html-webpack-plugin -D
在 micro-front-end-2 的根目录下新建 webapck.config.js：
const HtmlWebpackPlugin = require("html-webpack-plugin"); const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin"); module.exports = { mode: "development", devServer: { port: 8082, }, plugins: [ new ModuleFederationPlugin({ name: "microFrontEnd2", filename: "remoteEntry.js", exposes: { "./MicroFrontEnd2Index": "./src/index", }, }), new HtmlWebpackPlugin({ template: "./public/index.html", }), ], };
接着在 package.json 中增加 webpack script：
"scripts": { "webpack": "webpack serve", // ... },
删除 micro-front-end-2/public/index.html 的内容，并将 micro-front-end-1/public/index.html 的内容复制到其中。用一个新的id替换，如下所示：
// micro-front-end-2/public/index.html <!DOCTYPE html> <html lang="en"> <head> </head> <body> <div id="microFrontend2"></div> </body> </html>
删除 micro-front-end-2/src/index.js 的内容，并将 micro-front-end-1/public/index.html 的内容复制到其中。在<h1>标签中用你上面的id和服务名称替换：
// micro-front-end-2/src/index.js document.querySelector('#microFrontend2').innerHTML = `<h1>Micro-Front-End-2</h1> <p>This is the second Micro Frontend</p> <p> Fugiat exercitation irure in ex. Ut sunt qui nostrud sit nostrud aliquip minim excepteur irure tempor aute aute ad dolor. Sit elit consectetur ullamco dolor. Incididunt tempor consectetur sint est. Eu incididunt in elit eiusmod in consectetur aliquip occaecat ipsum mollit commodo qui nulla. Ipsum Lorem minim magna tempor do nostrud enim dolor dolore laborum fugiat aliquip et. Duis esse nulla in ut cupidatat id. Commodo incididunt ex occaecat sunt fugiat dolor aliqua nostrud eiusmod dolor dolore commodo nulla fugiat. Est aute sunt excepteur proident eiusmod id officia quis. Officia non ea pariatur ea duis fugiat mollit sit duis. Duis velit pariatur nostrud aliqua laboris irure amet Lorem amet. Eiusmod enim aliquip et ea ea quis irure occaecat qui in et nostrud. Elit est officia adipisicing qui fugiat sint non elit nisi tempor. Sint deserunt proident magna laboris esse velit mollit irure esse sint laborum eu veniam aliquip. Anim eu ipsum aliquip ullamco excepteur eu esse enim minim adipisicing nostrud magna veniam. Pariatur mollit ullamco commodo ea duis duis. Eu deserunt proident mollit aliqua nostrud voluptate consectetur Lorem nisi et qui sunt et deserunt.</p>`
然后执行 yarn webapck，打开 http://localhost:8082/，就可以看到：
