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.ashx 高效分页实现代码
Oct 20 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
使用jsonp完美解决跨域问题
Nov 27 Javascript
原生js实现日期联动
Jan 12 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
微信小程序实现页面浮动导航
Jan 08 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
实例讲解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 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
php var_export与var_dump 输出的不同
2013/08/09 PHP
Yii使用技巧大汇总
2015/12/29 PHP
Thinkphp和Bootstrap结合打造个性的分页样式(推荐)
2016/08/01 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
[47:10]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第二场 12.16
2020/12/18 DOTA
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
python将unicode转为str的方法
2017/06/21 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
Python内置函数locals和globals对比
2020/04/28 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
运输服务质量承诺书
2014/03/27 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
运动与健康自我评价
2015/03/09 职场文书
开会通知
2015/04/20 职场文书
董事会决议范本
2015/07/01 职场文书
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS