欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 健康 > 养生 > Webpack 模块联邦 VS npm 私服

Webpack 模块联邦 VS npm 私服

2025/3/19 6:01:45 来源:https://blog.csdn.net/sma2mmm/article/details/146316153  浏览:    关键词:Webpack 模块联邦 VS npm 私服

一、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 适用场景
  • 微前端架构:多个独立应用共享核心逻辑。

  • 跨团队协作:不同团队开发的应用复用公共模块。

  • 插件化系统:动态加载第三方插件或模块。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词