webpack5 联邦模块介绍详解

本文主要介绍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，或者可视化页面搭建等场景。

例子的 github地址

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

赞 (0)

相关推荐

  • 利用webpack理解CommonJS和ES Modules的差异区别

    前言 问: CommonJS 和 ES Modules 中模块引入的区别? CommonJS 输出的是一个值的拷贝:ES Modules 生成一个引用,等到真的需要用到时,再到模块里面去取值,模块里面的变量,绑定其所在的模块. 我相信很多人已经把这个答案背得滚瓜烂熟,好,那继续提问. 问:CommonJS 输出的值是浅拷贝还是深拷贝? 问:你能模拟实现 ES Modules 的引用生成吗? 对于以上两个问题,我也是感到一脸懵逼,好在有 webpack 的帮助,作为一个打包工具,它让 ES Mod

  • webpack打包html里面img后src为“[object Module]”问题

    在html中引入img图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compat

  • webpack项目轻松混用css module的方法

    前言 本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突. 比如antd-mobilenpm包的引入.在不做特殊处理的前提下,样式文件将会被转译成css module. 一.产生问题的原因 { test: /\.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: true, localIdentName: '[hash:base64:6]' } }, 'pos

  • webpack5 联邦模块介绍详解

    本文主要介绍webpack 5 的新特性之一 "module federation"(联邦模块),涉及联邦模块特性.使用方法.适用范围. 特性 webpack 5引入联邦模式是为了 更好的共享代码 . 在此之前,我们共享代码一般用npm发包来解决. npm发包需要经历构建,发布,引用三阶段,而联邦模块可以 直接引用其他应用代码 ,实现热插拔效果.对比npm的方式更加简洁.快速.方便. 使用方法 引入远程js webpack配置 模块使用 引入远程JS 假设我们有app1,app2两个应

  • Python图像处理库PIL的ImageGrab模块介绍详解

    ImageGrab模块用于将当前屏幕的内容或者剪贴板上的内容拷贝到PIL图像内存. 当前版本只支持windows系统. 一.ImageGrab模块的函数 1.  Grab 定义:ImageGrab.grab()⇒ image ImageGrab.grab(bbox) ⇒ image 含义:(New in 1.1.3)抓取当前屏幕的快照,返回一个模式为"RGB"的图像.参数边界框用于限制只拷贝当前屏幕的一部分区域. 例子: >>> from PIL importImag

  • Python图像处理库PIL的ImageDraw模块介绍详解

    ImageDraw模块提供了图像对象的简单2D绘制.用户可以使用这个模块创建新的图像,注释或润饰已存在图像,为web应用实时产生各种图形. PIL中一个更高级绘图库见The aggdraw Module 一.ImageDraw模块的概念 1.  Coordinates 绘图接口使用和PIL一样的坐标系统,即(0,0)为左上角. 2.  Colours 为了指定颜色,用户可以使用数字或者元组,对应用户使用函数Image.new或者Image.putpixel.对于模式为"1","

  • node(koa2) web应用模块介绍详解

    在自己的koa2 web项目中,用到了几个模块,感觉都是不错的,特地来分享下这些模块. 一.前言 我们都知道可以通过koa2 工程名的方式来初始化koa2项目,官方为我们增加了koa-bodyparser.koa-josn.koa-router等非常不错的模块,但是,仍不够,所以我将搜集到的有用的包介绍下,当然,有好的包仍然会添加到其中.整个项目在koa2-web-engine ,为了方便查看,使用了原生的方式,欢迎查看. 二.新的模块 将代码克隆到本地并安装依赖后,启动服务器,在3000端口可

  • Spring之ORM模块代码详解

    Spring框架七大模块简单介绍 Spring中MVC模块代码详解 ORM模块对Hibernate.JDO.TopLinkiBatis等ORM框架提供支持 ORM模块依赖于dom4j.jar.antlr.jar等包 在Spring里,Hibernate的资源要交给Spring管理,Hibernate以及其SessionFactory等知识Spring一个特殊的Bean,有Spring负责实例化与销毁.因此DAO层只需要继承HibernateDaoSupport,而不需要与Hibernate的AP

  • Spring之WEB模块配置详解

    Spring框架七大模块简单介绍 Spring中MVC模块代码详解 Spring的WEB模块用于整合Web框架,例如Struts1.Struts2.JSF等 整合Struts1 继承方式 Spring框架提供了ActionSupport类支持Struts1的Action.继承了ActionSupport后就能获取Spring的BeanFactory,从而获得各种Spring容器内的各种资源 import org.springframework.web.struts.ActionSupport;

  • Python安装依赖(包)模块方法详解

    Python模块,简单说就是一个.py文件,其中可以包含我们需要的任意Python代码.迄今为止,我们所编写的所有程序都包含在单独的.py文件中,因此,它们既是程序,同时也是模块.关键的区别在于,程序的设计目标是运行,而模块的设计目标是由其他程序导入并使用. 不是所有程序都有相关联的.py文件-比如说,sys模块就内置于Python中,还有些模块是使用其他语言(最常见的是C语言)实现的.不过,Python的大多数库文件都是使用Python实现的,因此,比如说,我们使用了语句import coll

  • Node.js Domain 模块实例详解

    Node.js Domain(域) 简化异步代码的异常处理,可以捕捉处理try catch无法捕捉的异常. Domain 模块可分为隐式绑定和显式绑定: 隐式绑定: 把在domain上下文中定义的变量,自动绑定到domain对象 显式绑定: 把不是在domain上下文中定义的变量,以代码的方式绑定到domain对象 创建domain.js,代码如下: var eventEmitter=require("events").EventEmitter; var domain=require(

  • Node.js 中的 fs 模块与Path模块方法详解

    Node.js 中的 fs 模块与Path模块方法详解

    概述: 文件系统模块是一个简单包装的标准 POSIX 文件 I/O 操作方法集.可以通过调用 require("fs") 来获取该模块.文件系统模块中的所有方法均有异步和同步版本. 文件系统模块中的异步方法需要一个完成时的回调函数作为最后一个传入形参. 回调函数的构成由调用的异步方法所决定,通常情况下回调函数的第一个形参为返回的错误信息. 如果异步操作执行正确并返回,该错误形参则为null或者undefined.如果使用的是同步版本的操作方法,一旦出现错误,会以通常的抛出错误的形式返回

  • Python之re模块案例详解

    一.正则表达式   re模块是python独有的匹配字符串的模块,该模块中提供的很多功能是基于正则表达式实现的,而正则表达式是对字符串进行模糊匹配,提取自己需要的字符串部分,他对所有的语言都通用.注意: re模块是python独有的 正则表达式所有编程语言都可以使用 re模块.正则表达式是对字符串进行操作 因为,re模块中的方法大都借助于正则表达式,故先学习正则表达式. (一)常用正则  1.字符组 在同一个位置可能出现的各种字符组成了一个字符组,在正则表达式中用[]表示 正则 待匹配字符 匹配

随机推荐