一、Webpack 模块联邦
1、Webpack 模块联邦介绍
可以在多个独立应用之间共享和复用核心业务逻辑,避免代码重复,提高开发效率和维护性
模块联邦是 Webpack 5 引入的功能,允许将应用拆分为多个独立的模块,并在运行时动态加载和共享这些模块。关键概念包括:
Host(宿主应用):消费其他应用模块的应用。
Remote(远程应用):提供模块给其他应用使用的应用。
Shared(共享模块):在多个应用之间共享的依赖(如 React、Lodash)
1-1 远程应用Remote
在webpack中开启模块联邦功能,并运行该远程应用
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
output: {
publicPath: 'http://localhost:3001/', // 远程应用的公共路径
},
plugins: [
new ModuleFederationPlugin({
name: 'remoteApp', // 远程应用的名称
filename: 'remoteEntry.js', // 远程入口文件
exposes: {
'./CoreLogic': './src/coreLogic.js', // 暴露核心业务逻辑模块
},
shared: {
react: { singleton: true }, // 共享 React
'react-dom': { singleton: true }, // 共享 ReactDOM
},
}),
],
};
1-2 配置宿主应用Host
启用webpack联邦服务
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
output: {
publicPath: 'http://localhost:3000/', // 宿主应用的公共路径
},
plugins: [
new ModuleFederationPlugin({
name: 'hostApp', // 宿主应用的名称
remotes: {
remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js', // 引用远程应用
},
shared: {
react: { singleton: true }, // 共享 React
'react-dom': { singleton: true }, // 共享 ReactDOM
},
}),
],
};
1-2-1 在宿主应用的代码中动态加载并使用远程模块,运行宿主环境
import React, { useEffect } from 'react';
const App = () => {
useEffect(() => {
import('remoteApp/CoreLogic').then(({ coreLogic }) => {
coreLogic(); // 调用远程应用的核心逻辑
});
}, []);
return <div>Host Application</div>;
};
export default App;
1-3 适用场景
微前端架构:多个独立应用共享核心逻辑。
跨团队协作:不同团队开发的应用复用公共模块。
插件化系统:动态加载第三方插件或模块。