在 Web 开发中，图片是不可或缺的一部分。但是，很多时候我们并不需要在页面加载时将所有图片一次性加载出来。这样会导致页面加载速度变慢，影响用户体验。因此，我们需要实现按需加载图片的功能，即在需要使用图片时再进行加载。在本文中，我们将介绍如何使用 Webpack 实现按需加载图片。
为什么需要按需加载图片？
在 Web 应用中，图片通常是比较大的资源。如果在页面加载时一次性加载所有图片，会导致页面加载速度变慢，影响用户体验。而按需加载图片则可以将图片的加载延迟到需要使用时再进行加载，从而提高页面加载速度，提升用户体验。
Webpack 是一个非常强大的打包工具，它可以将各种资源打包成一个或多个文件。在 Webpack 中，我们可以使用 file-loader 和 url-loader 两个插件来实现按需加载图片。
file-loader
file-loader 可以将文件输出到一个文件夹中，并返回文件的 URL 地址。它可以处理任意的文件类型，并将它们输出到一个指定的文件夹中。
我们可以在 Webpack 配置文件中配置 file-loader，如下所示：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------------------
---- -
-
------- --------------
-------- -
----- ---------------
----------- ----------
----------- ----------
--
--
--
--
--
--
--上面的配置会将所有以 .png、.jpg 或 .gif 结尾的图片文件输出到 images 文件夹中，并返回图片的 URL 地址。其中，name 选项指定输出文件的名称，outputPath 选项指定输出文件的路径，publicPath 选项指定 URL 地址的前缀。
url-loader
url-loader 可以将文件转换成 base64 编码的 URL，并将其嵌入到代码中。它可以根据文件大小自动判断是使用 file-loader 还是使用 url-loader。
我们可以在 Webpack 配置文件中配置 url-loader，如下所示：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------------------
---- -
-
------- -------------
-------- -
------ -----
----- ---------------
----------- ----------
----------- ----------
--
--
--
--
--
--
--上面的配置会将所有小于 8KB 的以 .png、.jpg 或 .gif 结尾的图片文件转换成 base64 编码的 URL，并将其嵌入到代码中。而大于 8KB 的图片文件则会使用 file-loader 进行处理。
示例代码
下面是一个使用 Webpack 实现按需加载图片的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-------------- ------------
-------
------
----------- ---------
---- ----------------------- ------------ ----- --
------- ---------------------------
-------
-------import logo from './images/logo.png';
const img = document.createElement('img');
img.src = logo;
document.body.appendChild(img);-- -------------------- ---- -------
-------------- - -
------ -------------
------- -
--------- ------------
--
------- -
------ -
-
----- --------------------
---- -
-
------- -------------
-------- -
------ -----
----- ---------------
----------- ----------
----------- ----------
--
--
--
--
--
--
--上面的代码中，我们首先在 HTML 文件中引入了一张图片，并设置了 src 属性。然后，在 JavaScript 文件中，我们使用 import 语句引入了这张图片，并将其赋值给了一个变量。最后，我们将这个变量赋值给 img 元素的 src 属性，并将 img 元素添加到了页面中。
在 Webpack 配置文件中，我们使用了 url-loader 来处理图片文件，将小于 8KB 的图片文件转换成 base64 编码的 URL，并将其嵌入到代码中。而大于 8KB 的图片文件则会使用 file-loader 进行处理，将其输出到 images 文件夹中，并返回图片的 URL 地址。
结论
通过使用 Webpack 的 file-loader 和 url-loader 插件，我们可以实现按需加载图片的功能，从而提高页面加载速度，提升用户体验。在实际开发中，我们可以根据需要选择使用 file-loader 或 url-loader，以达到最佳的加载效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675d2364e1dcc5c0fa394274