介绍
img-loader 是一个用于 Webpack 的图像压缩加载器，适用于处理各种图像格式（包括 PNG、JPEG、GIF 等）。使用 img-loader 可以帮助我们优化前端网页的加载速度，减小图片文件大小，提高用户体验。
安装
在项目目录下，通过 npm 安装 img-loader：
npm install img-loader --save-dev
配置
在 Webpack 的配置文件中添加 img-loader 的配置项：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ----------------------
---- -
-
------- -------------
-------- -
-------- -
------------------------------
----------- ------
---
-----------------------------
------------ -----
----------- ------
---
------------------------------
------ ----
------ --
---
--------------------------
-------- -
- ------------ ---- --
- ---------------- ----- --
--
---
--
--
--
--
--
--
--
--以上代码示例中，我们通过配置 Webpack 的规则（rules）来使用 img-loader。其中，test 属性用于指定需要处理的文件类型，use 属性则是指定该文件类型使用的各种 loader。
在 img-loader 中，我们还可以通过 options 属性来配置插件（plugins）。上述代码中，我们使用了四个插件来压缩不同格式的图像文件。
使用
在 JavaScript 代码中引入图片：
import imgSrc from './images/example.png'; const img = new Image(); img.src = imgSrc; document.body.appendChild(img);
使用 img-loader 后，Webpack 会自动将 example.png 压缩后替换为新的图片文件，并将其路径返回给 imgSrc 变量。因此，在代码中引用该变量即可加载压缩后的图片文件。
总结
通过本文的介绍，我们了解了 img-loader 的基本使用方法和配置方式。在实际开发中，使用 img-loader 可以帮助我们优化前端网页的图片加载速度，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/52169