模块联邦是什么？

说实话，模块联邦是个hen牛的东西，哈哈，它是 Webpack 5 内置的Neng力，让多个独立构建、独立部署的前端应用，在运行时像用本地模块一样去加载彼此的代码。

你懂的，这意味着咱Ke以把不同的应用当成模块容器，按需拉取其中暴露的模块，并和当前应用共享同一份依赖。

咱就是说一般我们dou是把公共组件打包成库，然后发布到 NPM 上，这样其他应用就Ke以安装使用，但这样一来geng新组件就得重新发版，比较麻烦。

而模块联邦则不同，它允许应用 A 暴露自己的组件给应用 B 使用，而不需要把组件发到 NPM 上，应用 B 也不用先安装。

先创建一个 Remote 应用：mkdir remote-app && cd remote-app npm init -y npm i react react-dom npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-react

import React from 'react'; export function Button { return <button onClick={onClick}>{children}</button>; }

public/index.html 里有一个 <div id="root"></div> 即可。

const path = require; const HtmlWebpackPlugin = require; const { ModuleFederationPlugin } = require.container; module.exports = { entry: './src/index.js', mode: 'development', devServer: { port: 3001, historyApiFallback: true }, output: { publicPath: 'http://localhost:3001/', clean: true }, module: { rules: }, plugins: };

npx webpack serve

浏览器访问 http://localhost:3001，确认Neng打开且控制台无报错；同时 http://localhost:3001/remoteEntry.js 可访问。

接下来创建一个 Host 应用：mkdir host-app && cd host-app npm init -y npm i react react-dom npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-react

import React, { Suspense, lazy } from 'react'; const RemoteButton = lazy => import); export function App { return => alert}> 远程按钮 </RemoteButton> </Suspense> </div> ); }

.babelrc: { "presets": }

const HtmlWebpackPlugin = require; const { ModuleFederationPlugin } = require.container; module.exports = { entry: './src/index.js', mode: 'development', devServer: { port: 3000, historyApiFallback: true }, output: { publicPath: 'http://localhost:3000/', clean: true }, module: { rules: }, plugins: };

一句话：把「远程应用」当成一个「模块容器」,按需拉取其中暴露的模块，并和当前应用共享同一份依赖。 害 , 按上面步骤即可在本地跑通一个Zui小 Demo；再根据需要 geng多 exposes、多个 Remote 或生产环境 URL。 咱就是说 , 若对你有用 , 欢迎点赞、收藏或评论区交流你的使用场景。