随着 Web 应用程序的不断发展，网站的图片数量也在不断增加。这些图片往往会占用很大的存储空间和带宽资源。为了提高网站的性能，我们需要减小图片文件的大小。在使用 Webpack 打包项目进行上线前，我们可以用 Webpack 自带的插件来压缩图片，以达到减小图片文件大小的目的。
本文将介绍如何利用 Webpack 打包后如何压缩图片，包括如何安装和配置相应的插件，并提供示例代码以供学习和指导。
安装和配置插件
Webpack 提供了多个用于压缩图片的插件。在这里，我们将介绍两个常用的插件：image-webpack-loader 和 imagemin-webpack-plugin。
首先，使用 npm 安装 image-webpack-loader 和 imagemin-webpack-plugin 插件：
npm install image-webpack-loader imagemin-webpack-plugin --save-dev
接着，我们需要在 Webpack 的配置文件中配置这两个插件。以下是一个简单的 Webpack 配置文件示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- --------------------- - -------------------------------------------
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
--------- --------------------
----- ----------------------- --------
--
------- -
------ -
-
----- --------------------------
------- -----------------------
-------- -
-------- -
------------ -----
--
-------- -
-------- ------
--
--------- -
-------- ------ -----
------ --
--
--------- -
----------- ------
--
----- -
-------- ---
--
--
--
--
--
-------- -
--- -------------------
--------- -------------------
--------- -------------
---
--- -----------------------
----- --------------------------
---
--- -------------------
--------- -- ----- ------------- --- -------- ---
---
--
--在这个示例中，我们首先引入必要的插件。然后，在 module.rules 中定义了处理图片的规则，并配置了插件的选项，以确保可以根据需要进行压缩。在 plugins 中，我们使用了 imagemin-webpack-plugin 插件来再次优化压缩。
image-webpack-loader 和 imagemin-webpack-plugin 都需要在 plugins 中引用，以便于 Webpack 能够正确地提取它们。
图片压缩的示例代码
下面是一个简单的示例代码，包括一个 HTML 文件和两个图片文件，其中第一个图片是未压缩的，第二个图片是通过 Webpack 压缩后的。
index.html：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- --------------- -- ---------------------------- ------- ------ ---- ------------------------- ------------ -- ---- ------------------------- ------- ------- ------- -- ------- -------
示例代码文件夹结构如下：
-- -------------------- ---- ------- - --- ----- - --- --- - - --- ---------------- - --- ---------- - --- ------- - --- ---------- - --- ---------- --- ---- - --- ------- - - --- ---------- - - --- ---------- - --- -------- - --- ---------- --- ------------ --- -----------------
在本示例中，我们将未压缩的图片放在 src/images/image1.jpg 中，压缩的图片放在 dist/images/image2.jpg 中。接下来，我们在 src/index.js 中引入这两张图片。
index.js：
import "./index.html";
import image1 from "./images/image1.jpg";
import image2 from "./images/image2.jpg";
console.log("未压缩的图片", image1);
console.log("通过 Webpack 压缩后的图片", image2);现在，使用以下命令运行 Webpack 并构建示例：
npx webpack
构建成功之后，我们可以在 dist/images 文件夹中找到压缩后的图片文件 image2.jpg，其大小应该比未压缩的图片文件 image1.jpg 要小很多。
结论
通过使用 Webpack 打包项目并使用相关插件来压缩图片，我们可以有效减小图片文件的大小，提高网站的性能和用户体验。编写高效的代码和使用优秀的工具是不可或缺的，希望本文的介绍可以引导大家更好的使用 Webpack 来优化自己的 Web 项目。
完整示例代码请参见 GitHub 仓库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6774cc1d6d66e0f9aaf080cb