随着前端项目越来越复杂，页面上的小图标数量也变得越来越多。传统的做法是使用 img 标签引用小图标，但这样会导致大量的网络请求和页面加载时间过长。为了解决这个问题，我们可以将小图标转换为 base64 编码，然后直接嵌入到 CSS 文件中，从而减少网络请求和页面加载时间。
然而，当小图标数量变得非常多的时候，将它们全部嵌入到 CSS 文件中也会导致 CSS 文件过大，从而影响页面加载时间。这时，我们可以使用 Webpack 来解决这个问题。
Webpack 的解决方案
Webpack 是一个模块打包器，它可以将多个小图标合并成一张大图标，并将它们的 base64 编码嵌入到 CSS 文件中。这样做有以下优点：
- 减少网络请求，加快页面加载速度。
- 减少 CSS 文件大小，从而减少网络流量消耗。
Webpack 提供了两个插件来解决小图标 base64 编码问题：url-loader 和 file-loader。它们的主要区别在于处理不同类型的文件。url-loader 可以处理小于指定大小的文件，将它们的 base64 编码嵌入到 CSS 文件中。而 file-loader 可以处理任意大小的文件，将它们复制到输出目录，并返回文件路径。
示例代码
安装依赖
首先，我们需要安装 webpack，url-loader 和 file-loader：
npm install webpack --save-dev npm install url-loader --save-dev npm install file-loader --save-dev
配置 Webpack
我们先来看一下如何使用 url-loader：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------------------
---- -
-
------- -------------
-------- -
------ -----
----- ---------------------
-
-
-
-
-
-
--在此配置中，我们配置了一个处理图片的规则。它将所有的 png、jpg 和 gif 图片文件处理成 base64 编码，如果图片大小小于 8KB（指定的 limit 值），它们将被嵌入到 CSS 文件中。对于大于 8KB 的图片，它们将被复制到输出目录 images 下。
如果你使用的是 file-loader，你可以将 url-loader 替换成 file-loader，并将 limit 值设置为一个比较大的值，如 8KB。这样，所有的图片都会被复制到输出目录 images 下。
使用图片
在 CSS 文件中，我们可以这样使用图片：
.icon {
width: 32px;
height: 32px;
background-image: url('./images/icon.png');
}这个例子中，我们使用了一个名为 icon.png 的图片，并将它的路径设置为相对于 CSS 文件的路径。
构建项目
最后，我们需要运行以下命令来构建项目：
webpack
这会将我们的项目打包到 dist 目录下，并生成一个名为 bundle.js 的文件和一个名为 images 的目录，其中包含了所有的图片文件。
总结
在本篇文章中，我们介绍了使用 Webpack 解决小图标 base64 编码问题的方案。通过使用 url-loader 和 file-loader，我们可以减少网络请求，加快页面加载速度，并减少 CSS 文件大小，从而减少网络流量消耗。我们提供了示例代码来说明如何配置 Webpack 和使用图片，希望能够给你带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d6b1548841e9894bb7d3d