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实现的Ajax 验证用户名是否存在的实现代码
Apr 06 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
jQuery表格插件datatables用法详解
Nov 23 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
jstree的简单实例
Dec 01 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
React复制到剪贴板的示例代码
Aug 22 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
vue+express+jwt持久化登录的方法
Jun 14 Javascript
layer 刷新某个页面的实现方法
Sep 05 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学习 字符串课件
2008/06/15 PHP
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
第五章 php数组操作
2011/12/30 PHP
ThinkPHP表单自动提交验证实例教程
2014/07/18 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
js 幻灯片的实现
2011/12/06 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
微信小程序访问豆瓣电影api的实现方法
2019/03/31 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
js实现动态时钟
2020/03/12 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
Python异常的检测和处理方法
2018/10/26 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
计算机工程学院个人求职信
2013/10/05 职场文书
博士研究生自我鉴定范文
2013/12/04 职场文书
国际会计专业求职信
2014/08/04 职场文书
卖房协议书样本
2014/10/30 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
通知的写法
2015/04/23 职场文书
雷锋的故事观后感
2015/06/10 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL
Python访问Redis的详细操作
2021/06/26 Python
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python