webpack5零基础入门-8清空前次打包文件与处理图标字体资源
1.配置output中的clean属性为true
output: {/**文件输出路径 绝对路径*///__dirname 表示当前文件的文件夹目录path: path.resolve(__dirname, 'dist'),//所有文件的输出目录/**文件名 */filename: 'static/js/dist.js',//入口文件输出文件名clean: true,//在打包前将path整个目录内容情况},即可以在打包前自动清空path目录
2.下载素材
3.引入样式和字体
4.运行npx webpack打包
可以看到dist中已经有了图标相关内容
5.添加字体图标相关配置
/**图标字体相关配置 */{test: /\.(ttf|woff2?)$/,//只对ttf、woff2资源起作用type: 'asset/resource',//加上/resource表示将资源原封不动的打包出来generator: {filename: "static/media/[hash][ext][query]"}}与图片配置类似，不同的是type变为asset/resource
表示将资源不进行转换直接打包
再配置generator将filename变成"static/media/[hash][ext][query]"
即可将字体图标相关文件打包到
static下的media目录中
执行npx webpack
6.在html文件中使用图标
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>webpack</title>
</head>
<body><script src="../../dist/static/js/dist.js"></script><h1>hell webpack</h1><!-- <div class="red"></div><div class="box"></div><div class="box2"></div><div class="box3"></div> --><span class="iconfont icon-tianjia"></span></body>
</html>
相关文章：
webpack5零基础入门-8清空前次打包文件与处理图标字体资源
1.配置output中的clean属性为true output: {/**文件输出路径 绝对路径*///__dirname 表示当前文件的文件夹目录path: path.resolve(__dirname, dist),//所有文件的输出目录/**文件名 */filename: static/js/dist.js,//入口文件输出文件名clean: true,//在打包前将path整个目录内…...
中国首个基于区块链的分布式算力网络上线
随着美国人工智能公司OpenAI近期发布的Sora视频模型，全球对高性能算力的需求突破了历史新高。Sora的创新在于它能够以超长生成时间、多角度镜头捕捉，理解物理世界的能力，这不仅是技术的一大突破，更是对算力需求的一大挑战。在这样…...
cesiumlab中shp转3dtiles白模效果一
安装cesiumlab 如果没有安装cesiumlab，去官网下载安装一个即可 http://www.cesiumlab.com/cesiumlab.html 效果 步骤 1、准备shp面数据 2、打开cesiumlab软件转换 选择shp面数据 设置高度，如果shp面中有高度字段，可以用高度字段ÿ…...
照片生成数字人技术重塑虚拟主播生态
随着数字技术的飞速发展，虚拟主播已成为现代传媒领域的一股新势力。然而，传统虚拟主播形象制作周期长、成本高的问题，限制了其在多个场景下的广泛应用。美摄科技，作为业界领先的数字内容创新者，针对这一痛点࿰…...
前端和后端权限控制【笔记】
前端权限设置【笔记】 前言版权推荐前端权限设置需求效果实现资源 后端权限控制1.给所有前端请求都携带token2.添加拦截器3.配置到WebMvcConfiguration4.更多的权限验证 最后 前言 2024-3-15 18:27:26 以下内容源自《【笔记】》 仅供学习交流使用 版权 禁止其他平台发布时删…...
老电脑装什么系统流畅
对于一些老旧电脑来说，重装系统是提升电脑性能的最佳选择。那么，老电脑装什么系统流畅呢？推荐Windows 7系统，它对硬件的需求相对较低。配置较低的电脑运行Windows 7可以更好地利用系统资源，提高电脑的运行速度和响应能…...
厉害了！机器视觉在农业中的应用
机器视觉是一门涉及模式识别、神经生物学、计算机科学、人工智能、图像处理、心理物理学等诸多领域的交叉学科。主要是通过计算机对人类某些视觉方面的智能行为的模拟和再现，再处理并理解从客观事物的图像中提取到的信息，最终达到在实际检测和控制中应用的目的。近年来，随着…...
简述从浏览器发出请求到数据返回的全过程
下面是我结合经验概述的从浏览器发出请求到数据返回的全过程。 一、用户请求 1、用户在浏览器输入URL，或通过功能发起请求； 2、解析URL，提取协议(http,https等)，IP，端口，域名，路径等信息&#x…...
MongoDB性能最佳实践：硬件和操作系统配置
欢迎阅读有关MongoDB性能最佳实践的系列博文。在往期文章中，我们已经讨论过查询模式和性能分析、事务和读/写关注等实现大规模性能的关键考虑因素。在本篇文章中，我们将讨论硬件和操作系统配置。 如果您在阿里云上部署MongoDB，那么阿里云会为…...
mysql查询条件包含IS NULL、IS NOT NULL、!=、like %* 、like %*%,不能使用索引查询，只能使用全表扫描，是真的吗？？？
不知道是啥原因也不知道啥时候, 江湖上流传着这么一个说法 mysql查询条件包含IS NULL、IS NOT NULL、!、like %* 、like %*%,不能使用索引查询，只能使用全表扫描。 刚入行时我也是这么认为的，还奉为真理！ 但是时间工作中你会发现还是走索引…...
使用IDEA2023创建传统的JavaWeb项目并运行与调试
日期：2024-0312 作者：dusuanyun 文档环境说明： OS：Deepin 20.9(Linux) JDK: OpenJDK21 Tomcat：10.1.19 IDEA: 2023.3.4 (Ultimate Edition) 本文档默认已经安装JDK及环境变量的配置。 关键词…...
【快捷部署】002_Flink（1.17.2）
📣【快捷部署系列】002期信息 编号选型版本操作系统部署形式部署模式002Flink1.17.2CentOS 7.Xtgz包单机 👉 演示视频 Flink一键安装（本地模式） install-flink.sh 脚本内容 #!/bin/bash ####变量 ###执行脚本的当前目录 mydir$…...
智慧公厕建设，助力打造宜居、韧性、可持续的智慧城市
公共厕所作为智慧城市的重要组成部分，对于城市的高质量发展起着至关重要的作用。智慧公厕建设旨在通过全面监测、控制和管理公共厕所，实现多方面功能，包括公共厕所环境监测与调控、厕位占用监测与引导、消耗品监测与缺失提示、安全防范与管理…...
[Django 0-1] Core.Cache模块
Caching 源码分析 Django 的 cache 缓存机制，包含了一些代理设计模式(代理了但没完全代理，多此一举)。 通过实现一个CacheHandler的manager类，来实现多缓存后端的统一管理和调用，避免到处实例使用。 缓存的目的 缓存的目的就是…...
spy分析文件另存为弹框【selenium】
有时需要下载多个文件，但是不想保存在同一个目录下，需要做两步 selenium设置浏览器默认下载路径，这个路径需要是个不存在的路径操作文件另存为弹框 文章目录 selenium设置浏览器默认下载路径操作文件另存为弹框 selenium设置浏览器默认下载路…...
分布式与集群，二者区别是什么？
🐓分布式 分布式系统是由多个独立的计算机节点组成的系统，这些节点通过网络协作完成任务。每个节点都有自己的独立计算能力和存储能力，可以独立运行。分布式系统的目标是提高系统的可靠性、可扩展性和性能。 分布式服务包含的技术和理论 负…...
(done) 什么是词嵌入技术？word embedding ?（这里没有介绍词嵌入算法）（没有提到嵌入矩阵如何得到）
参考视频：https://www.bilibili.com/video/BV1sw411S7i1/?spm_id_from333.788&vd_source7a1a0bc74158c6993c7355c5490fc600 词嵌入（word embedding）：把词汇表中的词或短语 -------- 映射 ----> 固定长度向量 我们可以把 …...
C++静态成员函数和非静态成员函数之间的相互调用
C静态成员函数和非静态成员函数之间的相互调用 一直对C静态成员函数和非静态成员函数之间的相互调用记不住，都是死记硬背，今天突然醍醐灌顶； 1、静态成员函数不能调用非静态成员函数，因为静态成员函数属于类，没有this…...
最好用的流程编辑器bpmn-js系列之基本使用
BPMN（Business Process Modeling Notation）是由业务流程管理倡议组织BPMI（The Business Process Management Initiative）开发的一套标准的业务流程建模符号规范。其目的是为用户提供一套容易理解的标准符号，这些符号作…...
Singularity（八）| conda实战
Singularity（八）| conda实战 8.1 conda 和容器的区别 Conda和容器技术（如Docker）都是现代软件开发和数据科学中常用的工具，用于解决环境依赖和应用部署的问题。尽管它们有着相似的目标，即确保应用可以在不…...
量子计算中Loschmidt回声相位测量的创新方法
1. 量子计算中的Loschmidt回声相位测量方法概述Loschmidt回声是量子动力学中一个重要的概念，它描述了量子系统在时间反演演化后与初始状态的相似程度。在量子计算领域，精确测量Loschmidt回声的相位信息对于理解量子系统的非平衡态行为、计算能量本征值以…...
硬件答辩问题总结
一、电源纹波是什么，为什么LDO的小，DCDC的大1.电源纹波电源纹波 是指直流电源输出电压上叠加的 交流波动成分，表现为电压在理想直流值附近上下波动。2.LDO 纹波小原理LDO 内部是一个 调整管（可变电阻） 串联在输入和输出…...
网易云音乐NCM转MP3终极指南：ncmdump工具完整使用教程
网易云音乐NCM转MP3终极指南：ncmdump工具完整使用教程 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 你是否曾经从网易云音乐下载了心爱的歌曲，却发现只能在特定播放器上收听？NCM格式的限制让音乐…...
终极鼠标连点器使用指南：3分钟掌握高效自动化技巧
终极鼠标连点器使用指南：3分钟掌握高效自动化技巧 【免费下载链接】MouseClick 🖱️ MouseClick 🖱️ 是一款功能强大的鼠标连点器和管理工具，采用 QT Widget 开发 ，具备跨平台兼容性 。软件界面美观 ，操作…...
基于ATmega2560与ISD1700的智能语音时钟：硬件选型、软件架构与避坑指南
1. 项目概述与核心价值去年折腾那个用ATMega328驱动三块显示屏的时钟时，我主要精力都花在了如何在320x240的TFT屏幕上把时间、日期和图标画得又准又好看上。项目在《Elektor》杂志上发表后，一位热心的读者给我提了个新想法：能不能做个会“说话…...
内存占用3KB！极致瘦身释放MCU无限可能
极致小体积，给工业领域带来了无限的可能：更低硬件成本，更小芯片体积，更低功耗，更高可靠性，让每一颗小MCU都拥有大系统的完整能力。 https://www.bilibili.com/video/BV1eZLi6PEjc/?spm_id_from333.1387.ho…...
基于MaixCam的延时摄影系统：从硬件选型到Python编程全解析
1. 项目概述：用MaixCam打造你的专属延时摄影工坊延时摄影，这个听起来有点专业、甚至带点“魔法”色彩的词，其实离我们并不遥远。想想看，把一朵花从含苞到绽放的几天时间，压缩成十几秒的惊艳绽放；或者把一座…...
sngan_projection论文解读：ICLR2018两大GAN技术的完美结合
sngan_projection论文解读：ICLR2018两大GAN技术的完美结合 【免费下载链接】sngan_projection GANs with spectral normalization and projection discriminator 项目地址: https://gitcode.com/gh_mirrors/sn/sngan_projection sngan_projection是一个实现了…...
告别漫长等待：UE5.2.1 Windows打包效率优化与插件问题排查指南
告别漫长等待：UE5.2.1 Windows打包效率优化与插件问题排查指南第一次点击"打包项目"按钮时，进度条仿佛被冻结的场景，每个UE5开发者都经历过。尤其当项目规模达到数十GB时，等待时间可能超过一小时——这背后隐藏着引擎底…...
ZYNQ中断避坑指南：PL端信号线如何正确‘连线’到PS端处理函数？
ZYNQ中断系统深度解析：从硬件信号到软件响应的全链路实践 在嵌入式系统开发中，中断处理是实时响应的核心机制。对于ZYNQ这种集成了ARM处理器(PS)和可编程逻辑(PL)的异构计算平台，其中断系统既有传统处理器的特性，又具备FPGA灵活定…...