webpack学习笔记（六）：图片打包处理

2024-06-21 02:45:16

本片文章将记录webpack中如何处理图片的打包问题。在介绍图片打包处理之前，先说明一下引入图片的三种方式：

使用背景图片：将一个包裹图片的元素的css中的background属性设置为图片路径
使用js导入：可以使用commonJS规范引入图片资源

const imgUrl = require('图片路径')
图片的dom对象.src=imgUrl

使用img标签：<img src= '图片路径'>

使用背景图片

先准备一张图片资源：

index.html中添加代码：

在index.css中添加样式：

由于官网中介绍了在最新版的css-loader中，可以支持对图片资源的处理，因此，单纯在webpack.config.js中配置css-loader就可以了。

如果不想使用css-loader来处理url对应的资源，可以配置：

{test: /\.css$/,use: ['style-loader', {loader: 'css-loader',options: {url: false}}]
}

使用js引入

若使用commonJS规范在入口文件中导入图片资源，首先index.html中添加代码：

index.js中添加代码：

这时需要下载包，url-loader和file-loader都可以处理图片：

webpack.config.js文件中添加，使用url-loader或者file-loader都可以：

这样图片就可以正常显示了。

使用img标签

首先index.html中添加：

这种方式需要用到html-loader来处理，先下载：

配置：

我们可以观察到，打包后的图片是base64编码格式的

这是因为网页中的每一张图片都需要发起一次网络请求，如果图片资源过多就会发起很多次的请求，这样会影响网站的性能。如果图片经过base64处理，把图片资源打包进js文件，就不用单独发起请求。但是并不能把所有图片都转换为base64，图片太大的话其base64编码太大，反过来也会影响网站性能。可以在url-loader中设置limit属性，它是图片是否进行base64编码的阈值，如果小于等于这个值就可编码，大于这个值就不处理，单位是字节。

关于webpack对图片资源的处理就到这了~

本篇笔记是看了B站up主“左耳击水兽”的讲解视频记录下来，感兴趣的同学可以直接看他视频哦。

webpack学习笔记（六）：图片打包处理相关推荐

webpack学习笔记1
webpack学习笔记1:基本概念前言: 现在在日常的开发中,webpack已经是必不可少的东西了,现在的需求基本都是用webpack对资源进行打包整合,所以打算写一点关于webpack的东西,这是 ...
opencv 手选roi区域_【opencv学习笔记六】图像的ROI区域选择与复制
图像的数据量还是比较大的,对整张图片进行处理会影响我们的处理效率,因此常常只对图像中我们需要的部分进行处理,也就是感兴趣区域ROI.今天我们来看一下如何设置图像的感兴趣区域ROI.以及对ROI区域图像 ...
【K210】K210学习笔记六——MaixHub在线模型训练识别数字
[K210]K210学习笔记六--MaixHub在线模型训练识别数字前言 K210准备工作数据的获取 MaixHub如何在线训练模型训练模型在K210上的测试小结前言本人大四学生,电赛生涯 ...
Java学习笔记六、面向对象编程中级部分
Java学习笔记六.面向对象编程中级部分包包的注意事项和使用细节访问修饰符访问修饰符的注意事项和使用细节面向对象编程三大特征封装封装的实现步骤(三步) 继承继承的细节问题继承的本质 ...
webpack学习笔记（三）：监听文件变化并编译
在上一篇webpack学习笔记中主要认识了webpack配置文件中相关的基础配置和命令的执行.这次学习如何在文件发生变化时自动打包编译. 首先,我们来看一下配置文件 const path = requ ...
webpack学习笔记（二）：认识配置和命令执行
在上一篇webpack学习笔记中,直接在命令行中使用npx webpack对项目进行打包时所使用的配置都是默认的,入口文件默认是src目录下的index.js文件,输出文件默认是dist文件夹下的ma ...
Ethernet/IP 学习笔记六
Ethernet/IP 学习笔记六 EtherNet/IP defines two primary types of communications: explicit and implicit (Ta ...
吴恩达《机器学习》学习笔记六——过拟合与正则化
吴恩达<机器学习>学习笔记六--过拟合与正则化一. 过拟合问题 1.线性回归过拟合问题 2.逻辑回归过拟合问题 3.过拟合的解决二. 正则化后的代价函数 1.正则化思想 2.实际使用的 ...
ROS学习笔记六：理解ROS服务和参数
ROS学习笔记六:理解ROS服务和参数主要介绍ROS服务和参数,同时使用命令行工具rosservice和rosparam. ROS service service是节点之间互相通信的另一种方式,se ...
JS学习笔记六：js中的DOM操作
1. JS学习笔记六:js中的DOM操作文章目录 1. JS学习笔记六:js中的DOM操作 1.1. 获取Dom节点 1.2. 元素属性的操作方式 1.3. DOM节点的创建.插入和删除 1.4. ...

最新文章

热门文章