webpack5 联邦模块介绍详解


Posted in Javascript onJuly 08, 2020

本文主要介绍webpack 5 的新特性之一 "module federation"(联邦模块),涉及联邦模块特性、使用方法、适用范围。

特性

webpack 5引入联邦模式是为了 更好的共享代码 。 在此之前,我们共享代码一般用npm发包来解决。 npm发包需要经历构建,发布,引用三阶段,而联邦模块可以 直接引用其他应用代码 ,实现热插拔效果。对比npm的方式更加简洁、快速、方便。

使用方法

  • 引入远程js
  • webpack配置
  • 模块使用

引入远程JS

假设我们有app1,app2两个应用,端口分别为3001,3002。 app1应用要想引用app2里面的js,直接用script标签即可。

例如app1应用里面index.html引入app2应用remoteEntry.js

<head>
  <script src="http://localhost:3002/remoteEntry.js"></script>
 </head>

webpack配置

app1的webpack配置:

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
  
module.exports = {
 //....
 plugins: [
  new ModuleFederationPlugin({
   name: "app1",
   library: { type: "var", name: "app1" },
   remotes: {
    app2: "app2",
   },
   shared: ["react", "react-dom"],
  }),
 ],
};

对于app2的webpack配置如下

plugins: [
  new ModuleFederationPlugin({
   name: "app2",
   library: { type: "var", name: "app2" },
   filename: "remoteEntry.js",
   exposes: {
    "./Button": "./src/Button",
   },
   shared: ["react", "react-dom"],
  })
 ],

可以看到app1和app2的配置基本相同,除了app2 多了filename和exposes以外。

参数解释

  • name 应用名,全局唯一,不可冲突。
  • library 。UMD标准导出,和name保持一致即可。
  • remotes 声明需要引用的远程应用。如上图app1配置了需要的远程应用app2.
  • filename 远程应用时被其他应用引入的js文件名称。对应上面的 remoteEntry.js
  • exposes 远程应用暴露出的模块名。
  • shared 依赖的包。
    • 如果配置了这个属性。webpack在加载的时候会先判断本地应用是否存在对应的包,如果不存在,则加载远程应用的依赖包。
    • 以app2来说,因为它是一个远程应用,配置了["react", "react-dom"] ,而它被app1所消费,所以webpack会先查找app1是否存在这两个包,如果不存在就使用app2自带包。 app1里面同样申明了这两个参数,因为app1是本地应用,所以会直接用app1的依赖。

模块使用

对于app1/App.js代码使用app2的组件,代码如下:

import React from "react";

const RemoteButton = React.lazy(() => import("app2/Button"));

const App = () => (
 <div>
  <h1>Basic Host-Remote</h1>
  <h2>App 1</h2>
  <React.Suspense fallback="Loading Button">
   <RemoteButton />
  </React.Suspense>
 </div>
);

export default App;

具体这一行

const RemoteButton = React.lazy(() => import("app2/Button"));

使用方式为:import('远程应用名/暴露的模块名'),对应webpack配置里面的name和expose。使用方式和引入一个普通异步组件无差别。

适用范围

由于share这个属性的存在,所以本地应用和远程应用的技术栈和版本必须兼容,统一用同一套。比如js用react,css用sass等。

联邦模块和微前端的关系:因为expose这个属性即可以暴露单个组件,也可以把整个应用暴露出去。同时由于share属性存在,技术栈必须一致。所以加上路由,可以用来实现single-spa这种模式的微前端。

使用场景:新建专门的组件应用服务来管理所有组件和应用,其他业务层只需要根据自己业务所需载入对应的组件和功能模块即可。模块管理统一管理,代码质量高,搭建速度快。特别适用矩阵app,或者可视化页面搭建等场景。

webpack5 联邦模块介绍详解

例子的 github地址

到此这篇关于webpack5 联邦模块介绍详解的文章就介绍到这了,更多相关webpack5 联邦模块 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
vue计算属性及使用详解
Apr 02 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
three.js着色器材质的内置变量示例详解
Aug 16 Javascript
JavaScript事件的委托(代理)的用法示例详解
Feb 18 Javascript
实例讲解React 组件
Jul 07 #Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 #Javascript
详解React 元素渲染
Jul 07 #Javascript
JS数据类型判断的几种常用方法
Jul 07 #Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 #Javascript
jQuery 实现扁平式小清新导航
Jul 07 #jQuery
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 #Javascript
You might like
php的一些小问题
2010/07/03 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
jQuery 工具函数学习资料
2010/04/29 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
JS分页效果示例
2013/10/11 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
2019/03/14 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
小学生读书活动总结
2014/06/30 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
MySQL索引失效的典型案例
2021/06/05 MySQL
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers