此页面由 Cloud Translation API 翻译。

将 Imagemin 与 webpack 结合使用

Katie Hempenius

设置 Imagemin webpack 插件

此 Glitch 已包含 webpack、webpack-cli 和 imagemin-webpack-plugin。要为 Imagemin 添加配置，您需要修改 webpack.config.js 文件。

此项目的现有 webpack.config.js 从以下来源复制映像：将 images/ 目录复制到 dist/ 目录，但进行压缩

点击 Remix to Edit 以使项目可修改。

。

注意：为什么要将图片复制到新的 dist/ 文件夹中？dist/是“distribution”的缩写将原始代码、图片等与其分发的版本分开处理是相当常见的做法，因为它们可能会略有不同。

首先，将以下代码添加到 Imagemin 插件的 webpack.config.js：

const ImageminPlugin = require('imagemin-webpack-plugin').default;

接下来，将以下代码添加为 plugins[] 数组的最后一项。这个将 Imagemin 添加到 webpack 使用的插件列表中：

。

new ImageminPlugin()

✔︎ 签到

完整的 webpack.config.js 文件现在应如下所示：

const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
     new CopyWebpackPlugin([{
       from: 'img/**/**',
       to: path.resolve(__dirname, 'dist')
     }]),
     new ImageminPlugin()
  ]
}

现在，您已经有了使用 Imagemin 压缩图片的 webpack 配置。

运行 webpack

点击终端（注意：如果系统未显示“终端”按钮，您可能需要使用全屏选项）。
要压缩图片，请在控制台：

webpack --config webpack.config.js --mode development

但是，如果在生产模式下运行 webpack 会发生什么？

重新运行 webpack，但这次在生产模式下运行：

webpack --config webpack.config.js --mode production

这一次，Webpack 会显示一条警告，告知您文件（尽管进行了一定压缩）仍会超过建议的大小限制。（Webpack 的 development 和 production 模式会优先考虑不同的内容，因此是您在生产模式下运行 webpack 时才会看到此警告的原因。）

自定义我们的 Imagemin 配置以修复此警告。

自定义 Imagemin 配置

通过将以下对象传递给 ImageminPlugin()，添加用于压缩 PNG 图片的设置：

{pngquant: ({quality: [0.5, 0.5]})}

此代码会指示 Imagemin 使用 Pngquant 插件压缩 PNG。通过 quality 字段使用 min 和 max 范围的值来确定压缩级别—0 为最低，1 为最高。强制所有图片以 50% 质量进行压缩，则传递 0.5 作为最小值和最大值。

✔︎ 签到

您的 webpack.config.js 文件现在应如下所示：

const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin([{
        from: 'img/**/**',
        to: path.resolve(__dirname, 'dist')
    }]),
    new ImageminPlugin({
      pngquant: ({quality: [0.5, 0.5]}),
      })
  ]
}

那么 JPEG 呢？该项目还包含 JPEG 图像，因此您应该指定以及它们的压缩方式

自定义您的 Imagemin 配置（续）

不使用 imagemin-webpack-plugin 的默认插件进行 JPG 压缩 (imagemin-jpegtran)，请使用 imagemin-mozjpeg 插件。与 Jpegtran 不同的是， Mozjpeg 可让您为 JPG 压缩指定压缩质量。我们已经已经在此 Glitch 中为您安装了 Mozjpeg 插件，但是您需要修改 webpack.config.js 文件：

初始化 imagemin-mozjpeg 插件，方法是在在 webpack.config.js 文件的顶部：

const imageminMozjpeg = require('imagemin-mozjpeg');

将 plugins 属性添加到传递给 ImageminPlugin() 的对象中，以便对象现在如下所示：

new ImageminPlugin({
  pngquant: ({quality: [0.5, 0.5]}),
  plugins: [imageminMozjpeg({quality: 50})]
})

此代码指示 webpack 将 JPG 压缩成质量 50（0 表示最差； 100 是最佳选择）。

如果您要为某个插件（它是以下插件的默认插件）添加设置， imagemin-webpack-plugin，它们可作为键-对象对添加到对象上传递给 ImageminPlugin()。Pnquant 的设置就是一个很好的例子。这个。

不过，如果您要为非默认插件（例如 Mozjpeg），通过将其包含在与 plugins 属性。

✔︎ 签到

现在，您的代码应如下所示：

const imageminMozjpeg = require('imagemin-mozjpeg');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new CopyWebpackPlugin([{
      from: 'img/**/**',
      to: path.resolve(__dirname, 'dist')
    }]),
    new ImageminPlugin({
      pngquant: ({quality: [0.5, 0.5]}),
      plugins: [imageminMozjpeg({quality: 50})]
    })
  ]
}

重新运行 Webpack 并通过 Lighthouse 验证结果

在控制台中，重新运行 webpack：

webpack --config webpack.config.js --mode production

太棒了！您所做的更改应该可以解决 webpack 警告问题。

Webpack 会在图片较大时向您发出警告，未压缩或未压缩。因此，建议您始终使用 Lighthouse 验证您的更改。

Lighthouse 的“高效对图片进行编码”“效果审核”工具网页上的 JPEG 图片经过最佳压缩。

如需预览网站，请按查看应用。然后按全屏。
运行 Lighthouse 性能审核（Lighthouse > 选项 > 性能）运行 Glitch 的实时版本，并验证 images 审核已通过。

通过“对图片高效编码”Lighthouse 中的审核

大功告成！您已使用 Imagemin 以最佳方式压缩网页上的图片。