用Image-Minimizer-Webpack-Plugin给你的图像换装，让它们更苗条！

2023-11-16 07:16:16

对于我们这些前端开发人员来说，总是不希望自己的网站像蜗牛一样缓慢，而优化图像大小是提高网站性能的有效途径之一。今天，我们就来介绍一个方便且高效的webpack图像压缩插件——image-minimizer-webpack-plugin。

前往：

1. 一路绿灯的安装指南

Image-Minimizer-Webpack-Plugin是一款插件，所以安装自然是我们的第一步。首先，我们需要在你的项目中安装webpack及image-minimizer-webpack-plugin，我们使用npm包管理器，所以只需要运行以下命令：

npm install webpack image-minimizer-webpack-plugin --save-dev

2. 使用Webpack的时髦玩法

为了让Image-Minimizer-Webpack-Plugin在webpack中发挥作用，我们需要在webpack配置中添加它。在webpack.config.js文件中，找到module.rules部分，然后添加以下配置：

module: {
  rules: [
    {
      test: /\.(png|jpe?g|gif)$/i,
      loader: 'image-minimizer-webpack-plugin',
      options: {
        minimizerOptions: {
          plugins: [
            ['gifsicle', { interlaced: true }],
            ['jpegtran', { progressive: true }],
            ['optipng', { optimizationLevel: 5 }],
            ['svgo', {}],
          ],
        },
      },
    },
  ],
},