介绍
imagemin-webpack-plugin 是一款基于 webpack 的图片压缩插件，可以让前端开发者在构建项目时自动将图片进行压缩，从而减小文件体积，提升页面加载速度。在今天的前端开发中，优化网站的性能是非常重要的一项工作，而压缩图片是网站优化中非常关键的一环。
安装
使用 imagemin-webpack-plugin 首先需要在项目中安装该插件。可以使用以下命令来进行安装：
npm install --save-dev imagemin-webpack-plugin
使用
在进行下一步操作之前，需要先了解 webpack ，并知道如何在 webpack 中使用插件。
配置插件
配置 imagemin-webpack-plugin 的过程也非常简单，只需要在 webpack 配置文件中加入以下代码：
-- -------------------- ---- -------
----- --------------------- - -------------------------------------------
----- ------ - -
-- --- ---- ---
-------- -
--- -----------------------
----- --------------------------
--------- -
-------- -------
-
--
-
-这里解释一下代码中的参数：
- test：要压缩的文件格式，这里包括了常见的四种图片格式，也可以根据实际需要进行修改。
- pngquant：PNG 格式压缩选项，可以通过 quality 选项来指定压缩的质量范围。
运行构建命令
当我们配置完 imagemin-webpack-plugin 后，就可以开始运行构建命令了，这时插件会自动对项目中的图片进行压缩。
npm run build
这里假设执行 npm run build 命令会触发 webpack 进行构建操作，在这个过程中 imagemin-webpack-plugin 会自动压缩项目中的图片。
示例代码
为了让大家更好地理解这个 npm 包，这里提供一个简单的示例：
-- -------------------- ---- -------
----- --------------------- - -------------------------------------------
----- ------ - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- -----------------------------
---- -
-
------- --------------
-------- -
----------- ---------------
-
-
-
-
-
--
-------- -
--- -----------------------
----- --------------------------
--------- -
-------- -------
-
--
-
--在这个示例中，我们配置了一个简单的 webpack 工程，使用了 file-loader 对图片进行处理，并在 output 中指定了输出路径。接下来又通过 ImageminWebpackPlugin 对图片进行压缩，指定了压缩格式为四种常见的图片格式，并设置了 PNG 格式的压缩级别。
总结
以上就是 imagemin-webpack-plugin 的使用教程，这款工具可以在构建项目时自动将图片进行压缩，减小文件体积，提高页面加载速度。优化性能是前端开发中非常重要的一环，而在网站优化中，压缩图片是非常关键的一步，因此使用 imagemin-webpack-plugin 帮助我们快速实现图片压缩，提高网站性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63698