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

webpack external 详解

作用:打包时将依赖独立出来,在运行时(runtime)再从外部获取这些扩展依赖,目的时解决打包文件过大的问题。
使用方法:
在这里插入图片描述
附上代码块

	config.set('externals', {vue: 'Vue','vue-router': 'VueRouter',axios: 'axios','ant-design-vue': 'antd',"moment": "moment",'vuex': 'Vuex','jsoneditor': 'JSONEditor','echarts': 'echarts'})

external 语法说明:
此处是一个key和value的形式,key是第三方依赖库的名称,
在这里插入图片描述
value 值可以是字符串,数组,对象,是第三方依赖打包后生成的js文件(引入的js静态文件或者cdn链接)执行后赋值给window的全局变量名称
全局变量名称如何去找,在node_modules的依赖包,如何找出全局变量名称,一般来说在umd文件中,找global 关键词,
在dist文件中,找exports 关键词,不行都找找
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

externals 配置了,index.html才可以引入插件的cdn,或者静态的插件js资源,且引入的cdn 的版本或者静态插件js版本,要和package.json以及package.lock.json保持一致才行
在这里插入图片描述

  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.6/vue-router.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.18.1/axios.min.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.7.2/antd.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.7.2/antd.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/locale/zh-cn.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.1.2/vuex.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/jsoneditor/9.0.0/jsoneditor.min.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/jsoneditor/9.0.0/jsoneditor.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0-rc.1/echarts.min.js"></script>

如何测试你找的indow的全局变量名称准不准,用浏览器打开引入之后的html文件,在控制台上输入window.找的名字,如果是undefined,就说明不对,继续找
在这里插入图片描述

相关文章:

webpack external 详解

作用&#xff1a;打包时将依赖独立出来&#xff0c;在运行时&#xff08;runtime&#xff09;再从外部获取这些扩展依赖&#xff0c;目的时解决打包文件过大的问题。 使用方法&#xff1a; 附上代码块 config.set(externals, {vue: Vue,vue-router: VueRouter,axios: axios,an…...

代码混淆不再愁:一篇掌握核心技巧

​ 1. 概述 代码混淆是将计算机程序的代码转换成一种功能上等价&#xff0c;但是难以阅读和理解的形式。 对于软件开发者来说&#xff0c;代码混淆可以在一定程度上保护程序免被逆向。 对于逆向工程师来说&#xff0c;学习代码混淆可以帮助我们研究反混淆技术。 2. 常见混淆…...

华为云IoT与OpenHarmony深度协同,加速设备上鸿即上云【云驻共创】

本次专题论坛探讨了华为云IoT与Open Harmony的深度协同、边缘屏蔽硬件差异、实现智慧隧道全方位智能化管理&#xff0c;以及华为云与Open Harmony生态的合作。同时也介绍了华为云物联网卡平台、HTTP2协议以及华为物联网在交通领域的应用。 一&#xff0e;华为云IoT与Open Harm…...

深入浅出 Linux 中的 ARM IOMMU SMMU I

Linux 系统下的 SMMU 介绍 在计算机系统架构中&#xff0c;与传统的用于 CPU 访问内存的管理的 MMU 类似&#xff0c;IOMMU (Input Output Memory Management Unit) 将来自系统 I/O 设备的 DMA 请求传递到系统互连之前&#xff0c;它会先转换请求的地址&#xff0c;并对系统 I…...

关于sqlModel 实现查询表单入参空值和模糊匹配一次性查询

在处理表单提交后&#xff0c;后端 SQL 查询部分空值和部分模糊值时&#xff0c;可以使用 SQLModel 构建动态查询。你可以根据表单数据动态构建 SQL 查询&#xff0c;并且只添加那些非空的、有值的条件。 以下是一个示例&#xff0c;假设你有一个模型 Item&#xff1a; from …...

数据仓库架构之详解Kappa和Lambda

目录 一、前言 二、架构详解 1 Lambda 架构 1.1 Lambda 架构组成 1.2 Lambda 特点 1.3 Lambda 架构的优点 1.4 Lambda 架构的不足 2 Kappa 架构 2.1 Kappa 架构的核心组件 2.2 Kappa 架构优点 2.3 Kappa 架构的注意事项 三、区别对比 四、选择时考虑因素 一、前言 …...

Banana Pi BPI-R3 Mini 开源路由器,也能拍出艺术美感

香蕉派BPI-R3 Mini路由器板开发板采用联发科MT7986A(Filogic 830)四核ARM A53芯片设计&#xff0c;板载2G DDR 内存&#xff0c;8G eMMC和128MB SPI NAND存储&#xff0c;是一款非常高性能的开源路由器开发板&#xff0c;支持Wi-Fi6 2.4G/5G&#xff08;MT7976C&#xff09;&am…...

Django高级之-分页器

目录 一、引入 二、分页推导 三、数据总页面获取 四、内置方法之divmod 五、终极大法 六、自定义分页器使用 【1】后端 【2】前端 一、引入 针对上一小节批量插入的数据 我们在前端展示的时候发现一个很严重的问题一页展示了所有的数据&#xff0c;数据量太大&#xf…...

Vue-报错No “exports“ main defined in xx

vue报错&#xff1a;No "exports" main defined in F:\wjh\vue#Practice\EasyQuestionnaire-web-master\EasyQuestionnaire-web-master\node_modules\babel\helper-compilation-targets\package.json 1.在文件中找到该路径的package.json文件&#xff0c; 2.按照提示…...

EL-input添加双击或者单击事件

#El-lement UI # 这个框架确实给我们带来了很多好处&#xff0c;最近一直忙于项目&#xff0c;没时间来写文章&#xff0c;最近有个问题困扰我很久&#xff0c;最终却很简单的解决了&#xff0c;记下来希望能帮助更多的人。 大家都知道el-input是无法直接添加click或者dblcli…...

OpenCV快速入门:绘制图形、图像金字塔和感兴趣区域

文章目录 前言一、绘制图形1. 绘制直线2. 绘制圆3. 绘制矩形4. 绘制椭圆5. 绘制多边形6. 绘制文字7. 可选参数8. 手工绘制OpenCV的logo 二、图像金字塔1. 高斯金字塔2. 拉普拉斯金字塔 三、感兴趣区域&#xff08;ROI&#xff09;数组切片方式OpenCV截取方式 总结 前言 OpenCV…...

Three.js相机模拟

有没有想过如何在 3D Web 应用程序中模拟物理相机? 在这篇博文中,我将向你展示如何使用 Three.js和 OpenCV 来完成此操作。 我们将从模拟针孔相机模型开始,然后添加真实的镜头畸变。 具体来说,我们将仔细研究 OpenCV 的两个失真模型,并使用后处理着色器复制它们。 拥有逼…...

Verilog基础:仿真时x信号的产生和x信号对于各运算符的特性

相关阅读 Verilog基础https://blog.csdn.net/weixin_45791458/category_12263729.html?spm1001.2014.3001.5482 信号爆x也许是所有IC人的噩梦&#xff0c;满屏的红色波形常让人头疼不已&#xff0c;但x信号的产生原因却常常只有几种&#xff0c;只要遵循一定的代码规范&#…...

穿越数据的迷宫-数据管理知识介绍

一、权威书籍介绍 《穿越数据的迷宫》 本书分12章重点阐述了数据管理的重要性&#xff0c;数据管理的挑战&#xff0c;DAMA的数据管理原则&#xff0c;数据伦理&#xff0c;数据治理&#xff0c;数据生命周期管理的规划和设计&#xff0c;数据赋能和数据维护&#xff0c;使用…...

3

目录 【任务 3】私有云运维开发[10 分] 【题目 1】Ansible 服务部署&#xff1a;部署 MariaDB 集群[2 分] 【题目 2】Ansible 服务部署&#xff1a;部署ELK 集群服务[2 分] 【题目 3】Python 运维开发&#xff1a;基于OpenStack Restful API 实现镜像上传[1 分] 【题目 4】Pyth…...

【python学习】基础篇-常用模块-multiprocessing模块:多进程

multiprocessing模块是Python标准库中用于实现多进程的模块&#xff0c;它提供了一些工具和类来创建和管理多个进程。 以下是multiprocessing模块的一些常用方法&#xff1a; Process()创建一个新的进程对象&#xff0c;需要传入一个函数作为该进程要执行的任务。 start()启动…...

JAVA SQL

-- /* */ -- 简单查询: -- 查询所有字段: select * from 表名 -- *:通配符,代表所有 select * from employees -- 查询部分字段: select 列名1,列名2,.. from 表名 -- 查询员工ID,员工姓名,员工的工资 select employee_id,salary,first_name from employees -- 查…...

[Linux] 进程入门

&#x1f4bb;文章目录 &#x1f4c4;前言计算机的结构体系与概念冯诺依曼体系结构操作系统概念目的与定位 进程概念描述进程-PCBtask_struct检查进程利用fork创建子进程 进程状态进程状态查看僵尸进程孤儿进程 &#x1f4d3;总结 &#x1f4c4;前言 作为一名程序员&#xff0c…...

深入解析数据结构与算法之堆

文章目录 &#x1f966;引言&#xff1a;&#x1f966;什么是堆&#x1f966;大顶堆与小顶堆&#x1f9c4;大顶堆&#xff08;Max Heap&#xff09;&#x1f9c4;小顶堆&#xff08;Min Heap&#xff09; &#x1f966;堆的表示&#x1f9c4;数组表示&#xff1a;&#x1f9c4;…...

信息化项目质量保证措施

...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...