一文大白话讲清楚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意向锁
这里写目录标题 前置问题概念作用兼容互斥性总结 前置问题 首先我们需要问自己什么是意向锁? 为什么要有意向锁? 意向锁如何使用? 概念 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 --
目录 问题现象:解决方法:问题原因: 问题现象: 使用 vim 打开一个文本文件,切换到编辑模式后,复制内容进行粘贴时有以下提示: 解决方法: 在命令行模式下禁用鼠标支持 :set mouse …...
Redis_Redission的入门案例、多主案例搭建、分布式锁进行加锁、解锁底层源码解析
目录 ①. Redis为什么选择单线程? ②. 既然单线程这么好,为什么逐渐又加入了多线程特性? ③. redis6的多线程和IO多路复用入门篇 ④. Redis6.0默认是否开启了多线程? ⑤. REDIS多线程引入总结 ①. Redis为什么选择单线程? ①…...
ZZNUOJ(C/C++)基础练习1021——1030(详解版)
目录 1021 : 三数求大值 C语言版 C版 代码逻辑解释 1022 : 三整数排序 C语言版 C版 代码逻辑解释 补充 (C语言版,三目运算)C类似 代码逻辑解释 1023 : 大小写转换 C语言版 C版 1024 : 计算字母序号 C语言版 C版 代码逻辑总结…...
力扣116. 填充每个节点的下一个右侧节点指针
Problem: 116. 填充每个节点的下一个右侧节点指针 文章目录 题目描述思路复杂度Code 题目描述 思路 遍历思想(利用二叉树的先序遍历) 本题目的难点在于对于不同父节点的邻接问题因此我们可以抽象将两两节点为一组(不同父节点的两个孩子节点也抽象为一组)…...
寒武纪MLU370部署deepseek r1
文章目录 前言一、平台环境准备二、模型下载三、环境安装四、代码修改五、运行效果 前言 DeepSeek-R1拥有卓越的性能,在数学、代码和推理任务上可与OpenAI o1媲美。其采用的大规模强化学习技术,仅需少量标注数据即可显著提升模型性能,为大模…...
Python NumPy(10):NumPy 统计函数
1 NumPy 统计函数 NumPy 提供了很多统计函数,用于从数组中查找最小元素,最大元素,百分位标准差和方差等。 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)方法一:2)方法二:2. doxygen注释自动生成插件3. doxygen注释基本语法4. doxygen的生成…...
【字符串两大注意事项】
表达字符串的方式 1.双引号:"hello world" 2.字符指针:char* ptr "hello world" 3.字符数组:char arr[] "hello world"辨析 项目表示方式代表含义内存分布1“hello world”字符串字面量字符串常量就是数据…...
jmap命令详解
jmap 用于生成 heap dump 文件,如果不使用这个命令,还可以使用-XX:HeapDumpOnOutOfMemoryError参数来让虚拟机出现 OOM 的时候自动生成 dump 文件。 jmap 不仅可以生成 dump 文件,还可以查询finalize执行队列、Java 堆的详细信息,…...
微机原理与接口技术期末大作业——4位抢答器仿真
在微机原理与接口技术的学习旅程中,期末大作业成为了检验知识掌握程度与实践能力的关键环节。本次我选择设计并仿真一个 4 位抢答器系统,通过这个项目,深入探索 8086CPU 及其接口技术的实际应用。附完整压缩包下载。 一、系统设计思路 &…...
FOC核心原理的C语言实现
概述 应用FOC算法,比如无人机、电动汽车或工业电机控制。因此,除了理论,还需要提供实用的实现步骤、常见问题及解决方案,比如如何获取电机的位置信息(编码器或传感器),如何处理电流采样&#x…...
基于互联网+智慧水务信息化整体解决方案
智慧水务的概述与发展背景 智慧水务是基于互联网、云计算、大数据、物联网等先进技术,对水务行业的工程建设、生产管理、管网运营、营销服务及企业综合管理等业务进行全面智慧化管理的创新模式。它旨在解决水务企业分散经营、管理水平不高、投资不足等问题。 水务…...
【信息系统项目管理师-选择真题】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 大数据毕设 机器学习
温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介: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实现自动化研究
引言 在信息时代,海量数据的产生与传播速度前所未有地加快,这既为研究者提供了丰富的资源,也带来了信息筛选与处理的巨大挑战。 传统研究方法往往依赖于研究者的个人知识库、文献检索技能以及时间投入,但面对指数级增长的数据量…...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes(简称K8s)中,Ingress是一个API对象,它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress,你可…...
linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 (忘了有没有这步了 估计有) 刷机程序 和 镜像 就不提供了。要刷的时…...
spring:实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例,也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下: 定义实例工厂类(Java代码),定义实例工厂(xml),定义调用实例工厂ÿ…...
Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况,可以通过以下几种方式模拟或触发: 1. 增加CPU负载 运行大量计算密集型任务,例如: 使用多线程循环执行复杂计算(如数学运算、加密解密等)。运行图…...
NFT模式:数字资产确权与链游经济系统构建
NFT模式:数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新:构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议:基于LayerZero协议实现以太坊、Solana等公链资产互通,通过零知…...
MySQL账号权限管理指南:安全创建账户与精细授权技巧
在MySQL数据库管理中,合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号? 最小权限原则…...
【7色560页】职场可视化逻辑图高级数据分析PPT模版
7种色调职场工作汇报PPT,橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版:职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...
C# 表达式和运算符(求值顺序)
求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如,已知表达式3*52,依照子表达式的求值顺序,有两种可能的结果,如图9-3所示。 如果乘法先执行,结果是17。如果5…...
Java多线程从入门到精通
一、基础概念 1.1 进程与线程 进程是指运行中的程序。 比如我们使用浏览器,需要启动这个程序,操作系统会给这个程序分配一定的资源(占用内存资源)。 线程是CPU调度的基本单位,每个线程执行的都是某一个进程的代码的某…...
