webpack5零基础入门-6webpack处理图片资源

news/2024/5/26 19:44:53/文章来源:https://blog.csdn.net/weixin_45636198/article/details/136659823

1.在webpack5中file-loader和url-loader为内置模块

  通过在加载器中配置rule即可激活

	{test: /\.(png|jpe?g|gif|webp)$/,type: 'asset'}

2.使用webpack进行打包

执行npx webpack

          

       可以看到图片资源打包后都被放到了dist文件目录下

3.使用webpack进行图片格式转换为base64

  优势:base64格式能被浏览器直接识别,无需额外发起请求 

   劣势:图片体积会变大,图片越大体积增加越多,越小增加越少,所以大图片不能转成         base64,小图片可以。

  配置: 

{test: /\.(png|jpe?g|gif|webp)$/,type: 'asset',parser: {dataUrlCondition: {//小于200kb的图标转base64,减少请求数量maxSize: 200 * 1024 // 200kb}}}

配置parser属性下的dataUrlCondition属性即可根据设置的规则将图片资源转换为base64格式

这里为了测试将maxSize设置成200kb

重新打包

可以发现图片资源都没了,都打包成了base64格式的字符串了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1005994.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue.js+SpringBoot开发考研专业课程管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 考研高校模块2.3 高校教师管理模块2.4 考研专业模块2.5 考研政策模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 考研高校表3.2.2 高校教师表3.2.3 考研专业表3.2.4 考研政策表 四、系统展示五、核…

Midjourney绘图欣赏系列(九)

Midjourney介绍 Midjourney 是生成式人工智能的一个很好的例子,它根据文本提示创建图像。它与 Dall-E 和 Stable Diffusion 一起成为最流行的 AI 艺术创作工具之一。与竞争对手不同,Midjourney 是自筹资金且闭源的,因此确切了解其幕后内容尚不…

Apache SeaTunnel MongoDB CDC 使用指南

随着数据驱动决策的重要性日益凸显,实时数据处理成为企业竞争力的关键。SeaTunnel MongoDB CDC(Change Data Capture) 源连接器的推出,为开发者提供了一个高效、灵活的工具,以实现对 MongoDB 数据库变更的实时捕获和处理。 本文将深入探讨该连…

如何使用ChatGPT辅助写论文、数据分析、AI绘图?【附学习资料】

原文链接:如何使用ChatGPT辅助写论文、数据分析、AI绘图?【附学习资料】https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247597452&idx1&sn8aa991235ffee89fc76590a90b9005d7&chksmfa823c6bcdf5b57df0cb02ecd1821921f38ea6de34c7…

【MMDetection3D实战(2)】: 利用MMDet3D预训练模型进行推理

安装完成MMDet3D环境后,我们就可以基于MMDet3D提供的预训练模型在点云和单目图像上进行推理。 下图是利用是基于预训练模型的推理结果,可以看到无论是基于点云还是图像,它都能给出一个正确的推理结果,把对应的car和motor的3D box正确的框出来。 推理的实现很简单,大体分…

【git】GitHub仓库没有 Contribution activity

解决方案 检查并更改本地的 git 绑定的邮箱和名字 git config --global user.name "Your New Name" git config --global user.email "yournewemailexample.com"查询方式 git config --global user.name git config --global user.email成功显示

【SQL】1070. 产品销售分析 III(窗口函数)

题目描述 leetcode题目:1070. 产品销售分析 III 方法一:窗口函数 select product_id, year as first_year, quantity, price from (select *,dense_rank() over(partition by product_id order by year) as rkfrom Sales ) A where A.rk 1方法二 …

IDEA开启Run Dashboard

1、Run Dashboard是什么,为什么要使用 Run Dashboard 是 IntelliJ IDEA 中的一个工具窗口,用于管理和监视项目中正在运行的应用程序和配置。它提供了一种集中管理运行和调试过程的方式,可以让开发人员更方便地查看和控制正在运行的应用程序。…

【Swing】Java Swing实现省市区选择编辑器

【Swing】Java Swing实现省市区选择编辑器 1.需求描述2.需求实现3.效果展示 系统:Win10 JDK:1.8.0_351 IDEA:2022.3.3 1.需求描述 在公司的一个 Swing 的项目上需要实现一个选择省市区的编辑器,这还是第一次做这种编辑器&#xf…

Midjourney新算法来袭!解决你角色形象一致性的大难题——亲测猫与女孩跨场景表现

嘿,朋友们,你们想过这个问题吗? 当你在制作一部电影或写一部小说时,你总希望同一个角色能在不同的场景和背景下出现,对吧? 但这时,一个难题冒出来了:如何确保这个角色的形象在各个…

机器学习-04-分类算法-03KNN算法

总结 本系列是机器学习课程的系列课程,主要介绍机器学习中分类算法,本篇为分类算法与knn算法部分。 本门课程的目标 完成一个特定行业的算法应用全过程: 懂业务会选择合适的算法数据处理算法训练算法调优算法融合 算法评估持续调优工程化…

[Unity]Mesh.uv赋值报错“Mesh.uv is out of bounds“

一、原因 顶点的数量和UV的数量不同,Mesh不会复制数组中数据,其实只是函数调用先后顺序的问题,类使用C的include有先后顺序。 二、解决 先赋值顶点,再赋值UV即可

【Vue】Request模块 - axios 封装Vuex的持久化存储

📝个人主页:五敷有你 🔥系列专栏:Vue ⛺️稳中求进,晒太阳 Request模块 - axios 封装 使用axios来请求后端接口,一般会对axios进行一些配置(比如配置基础地址,请求响应拦截器…

掌握Java建造者模式:逐步构建复杂对象的艺术与实践

建造者模式的主要目的是将一个复杂对象的构建过程封装起来,使得客户端代码不需要知道对象创建的细节。这种模式特别适用于那些具有多个组成部分、创建过程复杂、对象属性多且大多数属性可选的场合。 在Java中,建造者模式通常涉及以下几个角色&#xff1…

Three.js点线几何空间图形代码

Three.js点线几何空间图形代码。效果如下 下载地址 Three.js点线几何空间图形代码

Simple Admin:基于Go Zero的大型项目分布式微服务后端管理系统

Simple Admin 是一个开箱即用的分布式微服务后端管理系统,基于go-zero开发,为开发中大型后台提供了丰富的功能,支持三端代码生成。 官方自带多种扩展,助力中小企业快速上云,快速迭代。适合用于微服务学习和商用&#x…

【AI+编程】利用chatGPT编写python程序处理日常excel工作提升效率小技巧

之前写过一篇AI编程相关的文章 【人工智能】为啥我最近很少写python编程文章了,浅谈AI编程RPA提升工作效率 。 最近有同学私信我,怎么利用AI编程来提升工作效率,除了文章里讲的 使用AI帮忙写算法、代码提示、代码优化、不同语言转换(如J…

HTML静态网页成品作业(HTML+CSS)——电影加勒比海盗介绍设计制作(1个页面)

🎉不定期分享源码,关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 🏷️本套采用HTMLCSS,未使用Javacsript代码,共有1个页面。 二、作品演示 三、代…

Prompt进阶3:LangGPT(构建高性能质量Prompt策略和技巧2)--稳定高质量文案生成器

Prompt进阶3:LangGPT(构建高性能质量Prompt策略和技巧2)–稳定高质量文案生成器 1.LangGPT介绍 现有 Prompt 创建方法有如下缺点: 缺乏系统性:大多是细碎的规则,技巧,严重依赖个人经验缺乏灵活性:对他人分享的优质 …

Python之requests实现github模拟登录

文章目录 github 模拟登录前言模拟登录流程抓包操作查看登录表单的内容登录操作 模拟登录操作在 main函数的调用获得 auth_token调用/session接口登录处理检测登录是否成功 总结: github 模拟登录 前言 前面学习了requests模块的基础学习后,接下来做一个…