当前位置: 首页 > 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;…...

信息化项目质量保证措施

...

用STM32U5开发板做智能手表?这份保姆级教程和避坑指南请收好

基于STM32U5的智能手表开发实战&#xff1a;从零构建到低功耗优化 第一次拿到STM32U5开发板时&#xff0c;我被它名片大小的体积震惊了——这么小的板子真能跑动智能手表系统&#xff1f;三个月前&#xff0c;我带着这个疑问开始了自己的智能穿戴项目。现在我的原型机已经能稳定…...

短剧拉片网站2026推荐,满足多样分析需求

短剧拉片网站2026推荐&#xff0c;满足多样分析需求在短剧市场蓬勃发展的2026年&#xff0c;据《2026中国短剧行业发展报告》显示&#xff0c;短剧市场规模持续增长&#xff0c;用户数量不断攀升。然而&#xff0c;对于众多短剧创作者、从业者以及爱好者来说&#xff0c;找到一…...

SwiftUI与WebSocket构建iOS原生IM应用:从原理到实战

1. 项目概述&#xff1a;一个iOS原生即时通讯应用的诞生最近在GitHub上看到一个挺有意思的开源项目&#xff0c;叫sam-david/clawtalk-ios。光看名字&#xff0c;“ClawTalk”&#xff0c;直译过来是“爪语”或者“爪聊”&#xff0c;带着点神秘和趣味性。这其实是一个用SwiftU…...

三大核心模块:深度解析REFramework如何重塑RE引擎游戏体验

三大核心模块&#xff1a;深度解析REFramework如何重塑RE引擎游戏体验 【免费下载链接】REFramework Mod loader, scripting platform, and VR support for all RE Engine games 项目地址: https://gitcode.com/GitHub_Trending/re/REFramework 在当今游戏模组开发领域&…...

macOS Python 安装

目录 一、确认系统环境 二、安装 &#xff08;一&#xff09;下载安装包 &#xff08;二&#xff09;安装过程 三、配置环境变量 四、验证安装 一、确认系统环境 在安装 Python 之前&#xff0c;我们先简单了解一下自己的 MACOS 系统。可以点击屏幕左上角的苹果菜单&…...

蓝鲸CMDB配置项生命周期管理终极指南:从创建到归档的完整流程

蓝鲸CMDB配置项生命周期管理终极指南&#xff1a;从创建到归档的完整流程 【免费下载链接】bk-cmdb 蓝鲸智云配置平台(BlueKing CMDB) 项目地址: https://gitcode.com/gh_mirrors/bk/bk-cmdb 蓝鲸智云配置平台(BlueKing CMDB)是一款功能强大的配置管理工具&#xff0c;帮…...

3步攻克魔兽争霸3兼容性难题:WarcraftHelper实战指南

3步攻克魔兽争霸3兼容性难题&#xff1a;WarcraftHelper实战指南 【免费下载链接】WarcraftHelper Warcraft III Helper , support 1.20e, 1.24e, 1.26a, 1.27a, 1.27b 项目地址: https://gitcode.com/gh_mirrors/wa/WarcraftHelper 还在为经典游戏魔兽争霸3在现代Windo…...

IAPWS Python库:工业级热力学计算与工程分析的终极解决方案

IAPWS Python库&#xff1a;工业级热力学计算与工程分析的终极解决方案 【免费下载链接】iapws python libray for IAPWS standard calculation of water and steam properties 项目地址: https://gitcode.com/gh_mirrors/ia/iapws 你是否曾为复杂的热力学计算而头疼&am…...

AI智能体编排平台d3vsh0p:从需求到代码的自动化软件开发实践

1. 项目概述&#xff1a;一个由AI驱动的自主软件开发平台 如果你和我一样&#xff0c;经历过无数次从零开始构建一个软件项目的繁琐过程——写需求文档、设计架构、编码、测试、调试&#xff0c;再到最后的部署和维护——你可能会想&#xff0c;有没有一种方式能让这个过程更自…...

用立创EDA复刻蓝桥杯省赛真题电路:手把手搭建一个简易电压采集与显示系统(2022模拟题2)

用立创EDA复刻蓝桥杯省赛真题电路&#xff1a;手把手搭建一个简易电压采集与显示系统 在电子设计竞赛的备赛过程中&#xff0c;真题复现是最有效的实战训练方式之一。2022年蓝桥杯省赛模拟题中的电压采集与显示系统&#xff0c;融合了模拟信号处理、数字显示和存储等典型电路模…...