前端工程化技术的发展，使得前端项目的复杂度不断提升，其包含各种不同类型的文件。其中，图片资源在前端应用中占据了非常重要的位置。在这篇文章中，我们将会介绍 Webpack 在处理图片资源方面的相关技术。
Webpack 处理图片
在 Webpack 中，图片资源可以通过 url-loader 和 file-loader 这两个 Loader 进行处理。这两个 Loader 安装后，可以在 Webpack 配置文件中加入以下的代码：
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
------ -
-
----- -------------------
---- -
-
------- -------------
-------- -
------ -----
----- ------------------------------
-
-
-
-
-
-
-其中，test 表示需要处理的文件类型，use 表示使用什么 Loader 进行处理，这里我们使用了 url-loader，同时通过 options 对该 Loader 进行配置。
url-loader
url-loader 可以将图片转化为 DataURL，最终以 Base64 码的格式嵌入到 HTML、CSS 或 JS 文件中。这种方式有一个很显著的优点，就是可以减少 HTTP 请求的次数，从而提高网页的加载速度。
url-loader 的 options 中包含以下的配置：
limit：表示将小于这个值的文件都转化为 DataURL 嵌入，大于这个值的文件转化为文件路径进行引用。name：表示使用哪个名字规则来为生成的文件命名。
使用 url-loader 可以非常方便地将图片文件转化为 DataURL 嵌入到 HTML、CSS 或 JS 文件中：
import avatar from './avatar.png'; const img = new Image(); img.src = avatar; document.body.appendChild(img);
file-loader
file-loader 的作用与 url-loader 类似，但它不会将文件转化为 DataURL 而是直接复制文件到指定目录下，同时在引用时返回由相对 URL 组成的字符串。
file-loader 的 options 中包含以下的配置：
name：表示使用哪个名字规则来为生成的文件命名。
使用 file-loader 可以将图片文件直接复制到指定的目录下，返回用于引用的 URL：
import avatar from './avatar.png'; const imgSrc = '/images/avatar.e3fa3d10.png'; const img = new Image(); img.src = imgSrc; document.body.appendChild(img);
使用 file-loader 还有一个额外的好处，就是可以很方便地通过 Webpack 对图片进行压缩，从而减少图片文件的大小。
图片压缩
在实际应用中，为了使页面加载速度更快，我们需要对图片进行压缩以减少文件的大小。 图片压缩通常分为两种方式：有损压缩和无损压缩。
- 无损压缩：压缩后的图片与原图相比没有任何视觉差别，同时文件大小有所减小。无损压缩的算法有 PNG、GIF、WEBP 等。
- 有损压缩：压缩后的图片与原图有一定程度的视觉差别，但文件大小有较大程度的减小。有损压缩的算法有 JPEG、WEBP 等。
在 Webpack 中，可以通过插件的方式实现对图片的压缩，常用的压缩插件有 image-webpack-loader、imagemin 等。
image-webpack-loader
image-webpack-loader 是一个在打包过程中压缩图片的 Loader，它可以根据图片大小自动选择使用哪种压缩算法。当然，你也可以通过相关配置进行手动选择。
在 Webpack 配置文件中，可以加入以下的代码来使用 image-webpack-loader：
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
------ -
-
----- -------------------
---- -
-
------- -------------
-------- -
------ -----
----- ------------------------------
-
--
-
------- -----------------------
-------- -
-------- -
------------ -----
-------- --
--
-------- -
-------- ------
--
--------- -
-------- --------
------ -
--
--------- -
----------- ------
--
----- -
-------- --
-
-
-
-
-
-
-
-image-webpack-loader 的 options 中包含了各种算法的相关配置。
结尾
在 Webpack 中，处理图片资源相对来说比较简单，只需要在配置文件中加入相应的 Loader，并进行相应的配置。同时，如果你要进一步优化图片，可以使用插件进行图片的压缩。
希望本文能够对你掌握 Webpack 在处理图片资源方面的方法有一定的帮助。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6780032fce7f48612528cccd