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

本片文章将记录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主“左耳击水兽”的讲解视频记录下来，感兴趣的同学可以直接看他视频哦。