html5图片怎么打包,webpack如何打包图片-程序员宅基地

技术标签: html5图片怎么打包  

66b52468c121889b900d4956032f1009.png

8种机械键盘轴体对比

本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选?

初学webpack打包图片的时候,会遇到几种情况,需要注意。

首先在webpack中打包图片需要依赖于url-loader这个包资源,安装方法为1npm install url-loader

在webpack.config.js文件中的配置如下:1

2

3

4

5

6

7

8module: {

rules: [

{

test: /.(png|jpg|jpeg|gif)$/,

use: 'url-loader?limit=25000'

}

]

}

test属性代表可匹配的图片类型,以|隔开。

use属性里的limit字段代表图片打包限制,这个限制不是说超过了大小就不能打包了,而是小于限制的时候,图片会自动转成base64码。像本例大小限制为25k,当图片大小小于25k时会自动转成base64码,当图片大小超过25k时自动修改文件名为一个随机哈希值。我们可以通过name字段来指定哈希值的位数,以及目录。修改一下上面的配置1

2

3

4

5

6

7

8module: {

rules: [

{

test: /.(png|jpg|jpeg|gif)$/,

use: 'url-loader?limit=25000&name=dist/[hash:32].[name].[ext]'

}

]

}

这个配置打包后的图片,目录存在于dist文件夹下,文件名为32位哈希值,扩展名不变。

有了这个配置之后,我们来看一下三种打包情况。

1. HTML文件中img标签的src属性引用或内嵌样式引用1

2background.jpg

2. CSS文件中的背景图1

2

3#background {

background:url(background.jpg);

}

3. JavaScript文件中动态添加或者改变图片引用1document.getElementById('background').style.backgroundImage = 'url(background.jpg)';

前面两种情况,url-loader能匹配到图片自动生成名称被哈希过的新图片。但是在javascript里,如果像上面那样写,url-loader就无法匹配到相关图片。不过可以通过使用模块化的方式来引用图片,1

2var imgPath = require('./background.jpg');

document.getElementById('background').style.backgroundImage = 'url(' + imgPath + ')';

通过模块化的方式来引用图片,url-loader就能匹配到相应的图片了。

以上就是我在学习使用webpack打包图片时,总结出的一些经验。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30082413/article/details/117838491

智能推荐

Python 之 Pandas 文件操作和读取 CSV 参数详解_python read_csv-程序员宅基地

文章浏览阅读6.7k次,点赞8次,收藏48次。Pandas 读取文件,CSV 文件读取参数详解。_python read_csv

IIS写入漏洞利用工具解析_iis短域名-程序员宅基地

文章浏览阅读1k次。概述通过学习文档内容,熟悉并掌握 IIS 写入漏洞利用工具的利用方法,了解具体的功能内容,亲自实践操作,并根据课程需求完成相关任务。工具功能说明IIS 写入漏洞利用工具是由桂林老兵写的一款漏洞利用工具,专门针对 IIS 写入漏洞。接下来我们具体介绍一下相关的使用。1.第一部分数据包格式该功能模块默认的数据包传输方法有 7 种,分别是:OPTIONS 返回服务器的各种信息PUT 生成上传文件数据包的。POST 用来提交表单MOVE 是改名数据包。COPY 是复制数据包。DELETE_iis短域名

Pocket——Web3生态是变革区块链技术的中流砥柱-程序员宅基地

文章浏览阅读3k次。在过去的一年中,加密经济经历了新一轮波动,DeFi生态领域的应用是快速发展的代表之一。在DeFi顶级风口下,NFT火爆出圈,不断获得全球范围各层组织对NFT的认可,但NFT从本质上来看依旧处于fomo阶段,何时稳定发展依旧要看市场反馈。与此同时,元宇宙概念在2021年下半年火爆起来,元宇宙作为新型虚实相融的互联网应用和社会形态,通过沉浸式的体验,让虚拟进一步接近现实。但元宇宙能否成功搭建新型数字社会体系,依然处于概念发展阶段。而不论是DeFi生态,亦或是NFT及元宇宙生态,都离不开区块链底层技术的支

vue2/vue3 阻止控制台报错 并用普通方式将报错信息打印在控制台上_vue屏蔽报错-程序员宅基地

文章浏览阅读3.6k次,点赞5次,收藏9次。主要的代码就是 VueApp获取挂载元素 然后改写errorHandler 系统报错 和 warnHandler 系统警告方法。可以看到 控制台并没有报错 只是输出了报错信息 这样的字符串 我们也可以直接传给服务器 存储报错信息。也是在vue节点中 重写errorHandler和 warnHandler 方法。只用console输出一下 警告或报错提示 便结束方法。vue3 在 main.js中编写代码。vue2 在 main.js中编写代码。..._vue屏蔽报错

webpack学习笔记_hp webpack-程序员宅基地

文章浏览阅读972次,点赞18次,收藏3次。最近在巩固之前学过的知识,便想先从webpack开始,也是重新巩固学习,因为是蛮久之前学的所以一些新版本也还不够了解,希望得到一些大佬的指导让自己进步快一些,这里先提前谢谢各位老师了!_hp webpack

nps内网穿透在Windows系统下的搭建_nps windows搭建-程序员宅基地

文章浏览阅读1.8w次,点赞5次,收藏28次。本文主要讲解并记录了一次nps的实际应用,主要完成了在Windows系统下内网穿透的nps解决方案。主要用于将无公网IP的个人电脑,借助服务器的公网IP和相应端口映射到公网,使个人电脑能被外网访问。_nps windows搭建

随便推点

C语言 自减运算--_c语言自减-程序员宅基地

文章浏览阅读1.4k次。自减运算:–其用法用++的用法一模一样,是在原来值的基础上减掉1对于+=的用法,还有其它几种形式:i -= 1; //等价于: i = i-1;i = 1; //等价于: i = i1;i /= 3; //等价于: i = i/3;i %= 2; //等价于: i = i%2;..._c语言自减

ZZZ Project All 37 Product-国内最完整版-程序员宅基地

文章浏览阅读3.1k次。ZZZ Project All Product将为您带来ZZZ Project的所有程序,产品能够有效的增强.net框架,并支持使用批处理命令优化数据库的性能,并为您的项目添加许多功能,例如Entity Framework Classic使用不仅可提供Entity Framework 6(EF6)的所有功能,并且将会带来更好的性能,而Entity Framework Extensions...

反向代理与负载均衡------Nginx安装与使用-程序员宅基地

文章浏览阅读129次。什么是反向代理首先要知道什么叫正向代理,举例:一个微商卖东西,随着顾客量增多,就需要招聘代理人员帮忙卖,在程序上直观的效果就是这个很容易理解,那么什么是反向代理。反向代理:反向代理服务器位于用户与目标服务器之间,但是对于用户而言,反向代理服务器就相当于目标服务器,即用户直接访问反向代理服务器就可以获得目标服务器的资源。同时,用户不需要知道目标服务器的地址,也无须在用户端作任何设定。反向代理服务器通常可用来作为Web加速,即使用反向代理作为Web服务器的前置机来降低网络和服务器的负载,提高访问效率。

sort()函数_sort(x,partial=2)[2]-程序员宅基地

文章浏览阅读387次,点赞5次,收藏2次。STL的排序函数sort()的定义有两种方式:(1)sort(begin,end)(2)sort(begin,end,compare)无返回值,基于快速排序,范围是[first,last),包括first,不包括last,复杂度是O(nlog2(n))sort()的比较函数可以用系统的4种函数排序,常用的是降序和升序,即less()和greater()#include<bit..._sort(x,partial=2)[2]

关灯小游戏-程序员宅基地

文章浏览阅读320次。关灯小游戏:简单说明:简单代码实现:import javax.swing.*;import java.util.*;public class Light { public static void main(String[] args) { //初始化棋盘 int[][] games = new int[10][10]; R..._关灯小游戏

uniapp swiper Tab选项卡切换高度自适应问题_uniapp 页面tab 切换一瞬间没有内容 会缩小页面高度-程序员宅基地

文章浏览阅读3.4k次。uniapp swiper Tab选项卡切换高度自适应问题uniapp swiper Tab选项卡切换高度自适应问题swiper需要指定固定高度,但数据是动态加载的,所以高度需要自适应。基本思路:就是获取展示内容的高度 赋值给swiper。但是中间有好多坑,淌过了在这里分享一下思路,经验不足,有改进的地方欢迎多多指点<wuc-tab :tab-list="tabList3" :tab..._uniapp 页面tab 切换一瞬间没有内容 会缩小页面高度