当前位置: 首页 > news >正文

一文大白话讲清楚webpack进阶——9——ModuleFederation实战

文章目录

  • 一文大白话讲清楚webpack进阶——9——ModuleFederation实战
  • 1. 啥是ModuleFederation
  • 2. 创建容器应用
  • 3. 创建远程应用
  • 4. 启动远程应用
  • 5. 使用远程应用的组件

一文大白话讲清楚webpack进阶——9——ModuleFederation实战

1. 啥是ModuleFederation

  • 先看这篇文章,了解ModuleFederation
  • 一文大白话讲清楚webpack进阶——8——Module Federation

2. 创建容器应用

  • 创建项目并初始化,
  • 安装webpack和webpack-cli
  • 配置webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const path = require("path");module.exports = {entry: './src/index.js',mode: 'development',output: {publicPath: 'auto',},plugins: [new ModuleFederationPlugin({name: "sharedLib",filename: "remoteEntry.js",exposes: {'./MyComponent': './src/MyComponent.js',},shared: {react: { singleton: true, requiredVersion: '^17.0.0' },'react-dom': { singleton: true, requiredVersion: '^17.0.0' }}}),],
};

3. 创建远程应用

  • 创建项目并初始化,
  • 安装webpack和webpack-cli
  • 配置webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const path = require("path");module.exports = {entry: './src/index.js',mode: 'development',output: {publicPath: 'auto',},plugins: [new ModuleFederationPlugin({name: "app",remotes: {sharedLib: "sharedLib@http://localhost:3000/remoteEntry.js",},shared: {react: { singleton: true, requiredVersion: '^17.0.0' },'react-dom': { singleton: true, requiredVersion: '^17.0.0' }}}),],
};

4. 启动远程应用

  • 启动远程应用

5. 使用远程应用的组件

  • 在容器应用中的入口文件引用组件
import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from 'sharedLib/MyComponent'; // 从远程库中导入组件
import App from './App'; // 本地组件或其他逻辑ReactDOM.render(<React.StrictMode><App /><MyComponent /></React.StrictMode>, document.getElementById('root'));

相关文章:

一文大白话讲清楚webpack进阶——9——ModuleFederation实战

文章目录 一文大白话讲清楚webpack进阶——9——ModuleFederation实战1. 啥是ModuleFederation2. 创建容器应用3. 创建远程应用4. 启动远程应用5. 使用远程应用的组件 一文大白话讲清楚webpack进阶——9——ModuleFederation实战 1. 啥是ModuleFederation 先看这篇文章&#…...

Mysql意向锁

这里写目录标题 前置问题概念作用兼容互斥性总结 前置问题 首先我们需要问自己什么是意向锁&#xff1f; 为什么要有意向锁&#xff1f; 意向锁如何使用&#xff1f; 概念 mysql官网上对于意向锁的解释中有这么一句话 The main purpose of IX and IS locks is to show that …...

输入一行字符,分别统计出其中英文字母,空格,数字和其他字符的个数。

input_strinput("请输入一行字符: ") letter0 #表示英文字母的个数 space0 #表示空格的个数 digit0 # 表示数字的个数 others0 #表示其它字符的个数for char in input_str:if char.isalpha(): #判断字符char是否字母letter1elif char.isspace(): # 判断是否空格space…...

AD电路仿真

目录 0 前言 仿真类型 仿真步骤 仿真功能及参数设置 仿真模型 应用优势 1 新建原理图 2 放置元器件及布线 3 放置探头 4 实验结果 Operating Point 分析的作用 DC Sweep 的主要功能 Transient Analysis 的主要功能 AC Analysis 的功能 5 总结 1. 直流工作点分析…...

vim 中粘贴内容时提示: -- (insert) VISUAL --

目录 问题现象&#xff1a;解决方法&#xff1a;问题原因&#xff1a; 问题现象&#xff1a; 使用 vim 打开一个文本文件&#xff0c;切换到编辑模式后&#xff0c;复制内容进行粘贴时有以下提示&#xff1a; 解决方法&#xff1a; 在命令行模式下禁用鼠标支持 :set mouse …...

Redis_Redission的入门案例、多主案例搭建、分布式锁进行加锁、解锁底层源码解析

目录 ①. Redis为什么选择单线程&#xff1f; ②. 既然单线程这么好,为什么逐渐又加入了多线程特性&#xff1f; ③. redis6的多线程和IO多路复用入门篇 ④. Redis6.0默认是否开启了多线程&#xff1f; ⑤. REDIS多线程引入总结 ①. Redis为什么选择单线程&#xff1f; ①…...

ZZNUOJ(C/C++)基础练习1021——1030(详解版)

目录 1021 : 三数求大值 C语言版 C版 代码逻辑解释 1022 : 三整数排序 C语言版 C版 代码逻辑解释 补充 &#xff08;C语言版&#xff0c;三目运算&#xff09;C类似 代码逻辑解释 1023 : 大小写转换 C语言版 C版 1024 : 计算字母序号 C语言版 C版 代码逻辑总结…...

力扣116. 填充每个节点的下一个右侧节点指针

Problem: 116. 填充每个节点的下一个右侧节点指针 文章目录 题目描述思路复杂度Code 题目描述 思路 遍历思想(利用二叉树的先序遍历) 本题目的难点在于对于不同父节点的邻接问题因此我们可以抽象将两两节点为一组&#xff08;不同父节点的两个孩子节点也抽象为一组&#xff09…...

寒武纪MLU370部署deepseek r1

文章目录 前言一、平台环境准备二、模型下载三、环境安装四、代码修改五、运行效果 前言 DeepSeek-R1拥有卓越的性能&#xff0c;在数学、代码和推理任务上可与OpenAI o1媲美。其采用的大规模强化学习技术&#xff0c;仅需少量标注数据即可显著提升模型性能&#xff0c;为大模…...

Python NumPy(10):NumPy 统计函数

1 NumPy 统计函数 NumPy 提供了很多统计函数&#xff0c;用于从数组中查找最小元素&#xff0c;最大元素&#xff0c;百分位标准差和方差等。 1.1 numpy.amin() 和 numpy.amax() numpy.amin() 用于计算数组中的元素沿指定轴的最小值。 numpy.amin(a, axisNone, outNone, keep…...

Ubuntu下的Doxygen+VScode实现C/C++接口文档自动生成

Ubuntu下的DoxygenVScode实现C/C接口文档自动生成 Chapter1 Ubuntu下的DoxygenVScode实现C/C接口文档自动生成1、 Doxygen简介1. 安装Doxygen1&#xff09;方法一&#xff1a;2&#xff09;方法二&#xff1a;2. doxygen注释自动生成插件3. doxygen注释基本语法4. doxygen的生成…...

【字符串两大注意事项】

表达字符串的方式 1.双引号&#xff1a;"hello world" 2.字符指针&#xff1a;char* ptr "hello world" 3.字符数组&#xff1a;char arr[] "hello world"辨析 项目表示方式代表含义内存分布1“hello world”字符串字面量字符串常量就是数据…...

jmap命令详解

jmap 用于生成 heap dump 文件&#xff0c;如果不使用这个命令&#xff0c;还可以使用-XX:HeapDumpOnOutOfMemoryError参数来让虚拟机出现 OOM 的时候自动生成 dump 文件。 jmap 不仅可以生成 dump 文件&#xff0c;还可以查询finalize执行队列、Java 堆的详细信息&#xff0c…...

微机原理与接口技术期末大作业——4位抢答器仿真

在微机原理与接口技术的学习旅程中&#xff0c;期末大作业成为了检验知识掌握程度与实践能力的关键环节。本次我选择设计并仿真一个 4 位抢答器系统&#xff0c;通过这个项目&#xff0c;深入探索 8086CPU 及其接口技术的实际应用。附完整压缩包下载。 一、系统设计思路 &…...

FOC核心原理的C语言实现

概述 应用FOC算法&#xff0c;比如无人机、电动汽车或工业电机控制。因此&#xff0c;除了理论&#xff0c;还需要提供实用的实现步骤、常见问题及解决方案&#xff0c;比如如何获取电机的位置信息&#xff08;编码器或传感器&#xff09;&#xff0c;如何处理电流采样&#x…...

基于互联网+智慧水务信息化整体解决方案

智慧水务的概述与发展背景 智慧水务是基于互联网、云计算、大数据、物联网等先进技术&#xff0c;对水务行业的工程建设、生产管理、管网运营、营销服务及企业综合管理等业务进行全面智慧化管理的创新模式。它旨在解决水务企业分散经营、管理水平不高、投资不足等问题。 水务…...

【信息系统项目管理师-选择真题】2005下半年综合知识答案和详解

更多内容请见: 备考信息系统项目管理师-专栏介绍和目录 文章目录 【第1题】【第2题】【第3题】【第4题】【第5题】【第6题】【第7~8题】【第9~10题】【第11题】【第12题】【第13题】【第14题】【第15题】【第16题】【第17题】【第18题】【第19题】【第20题】【第21题】【第22题…...

计算机毕业设计Python+CNN卷积神经网络考研院校推荐系统 考研分数线预测 考研推荐系统 考研爬虫 考研大数据 Hadoop 大数据毕设 机器学习

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

第十一章 F - H 开头的术语

文章目录 第十一章 F - H 开头的术语文件流 (file stream)最终类 (final class)最终方法 (final method)最终属性 (final property)外键 (foreign key)基础 (foundation) 以 G 开头的术语全局 (global)全局数据库 (globals database)全局目录 (global directory)全局唯一标识符…...

深度研究新范式:通过Ollama和DeepSeek R1实现自动化研究

引言 在信息时代&#xff0c;海量数据的产生与传播速度前所未有地加快&#xff0c;这既为研究者提供了丰富的资源&#xff0c;也带来了信息筛选与处理的巨大挑战。 传统研究方法往往依赖于研究者的个人知识库、文献检索技能以及时间投入&#xff0c;但面对指数级增长的数据量…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...