imagemin-webpack-plugin v 2.4.2

使用imagemin压缩项目中图片的插件。

安装

npm install imagemin-webpack-plugin

注意

需要 node 版本 >= 4.0.0

使用示例

import ImageminPlugin from 'imagemin-webpack-plugin'

module.exports = {
  plugins: [
    // 确保该插件在任何添加图片的插件之后
    new ImageminPlugin({
      disable: process.env.NODE_ENV !== 'production', // 开发模式禁用
      pngquant: {
        quality: '95-100'
      }
    })
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13

和copy-webpack-plugin一起使用：

module.exports = {
  plugins: [
    // 拷贝图片文件夹并优化所有图片
    new CopyWebpackPlugin([{
      from: 'images/'
    }]),
    new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i })
  ]
}

1
2
3
4
5
6
7
8
9

API

new ImageminPlugin(options)

options属性	类型	默认值	描述
disable	`Boolean`	`false`	当设置为`true`时，它将完全禁用插件。这对于在开发过程中禁用插件，只有在生产过程中才启用它非常有用。
test	`RegExp \| String \| Array`	`/.*/`	该插件将只运行在匹配的文件上运行。这一点和 webpack loader 的 test 配置项很相似(但实现方式并不相同，所以可能有很大的区别！) 这可以是一个RegExp对象，一个通配符，一个获取文件名并在文件应该被缩小时返回 `true` 的函数，或者它们中的任何一个的数组。它允许您只在特定文件上运行插件，甚至可以为不同的图像集多次应用插件，并对每个图像应用不同的`imagemin`设置。将覆盖所有内容，包括`externalImages`配置项！示例放在表格后。
maxConcurrency	`Number`	系统逻辑CPU的数量	设置一次可以运行的`Imagemin`实例的最大数量。设置为`Infinity`则同时对每个图片运行单独的进程。
optipng	`Object \| null`	`{ optimizationLevel: 3 }`	传递给imagemin-optipng的配置对象。设置为`null`则禁用此项。
gifsicle	`Object \| null`	`{ optimizationLevel: 1 }`	传递给imagemin-gifsicle的配置对象。设置为`null`则禁用此项。
jpegtran	`Object \| null`	`{ progressive: false }`	传递给imagemin-jpegtran的配置对象。设置为`null`则禁用此项。
svgo	`Object \| null`	`{}`	传递给imagemin-svgo。设置为`null`则禁用此项。
pngquant	`Object \| null`	`null`	传递给imagemin-pngquant。设置为`null`则禁用此项。
plugins	`Array`	`[]`	这里包含您想要 imagemin 使用的其他任何插件。默认情况下包含了上述的内容，但如果您想(或需要)禁用它们(通过将其设置为`null`)，并将其放在这里。这里有一些imagemin的插件。示例放在表格后面。
externalImages	`Object`	`{ context: '.', sources: [], destination: null, fileName: null }`	这里放置任何需要被 imagemin 解析(不在webpack编译的资源中)的外部图像。如果没有设置`destination`，则文件会自行进行优化。您可以选择将其中任何一项设置为函数，它会在优化前的最后一秒调用，以获取在写入配置时可能不存在的文件。路径将遵循webpack(和这个插件)的上下文配置项，因此在下面的例子中，文件将从`./src/images/*/.png`中读取，并将写入`并将写入`上下文，该上下文只适用于源数组。示例放在表格后。
minFileSize	`整数`	`Infinity`	仅适用于按字节计算大于该值的图像。
maxFileSize	`整数`	`Infinity`	仅适用于按字节计算小于等于该值的图像。他和`minFileSize`可以用于在不同大小的文件的多个配置中多次包含`WebpackImageminPlugin`。示例放在表格后。
cacheFolder	`String`	`""`	将缩小后的图像缓存到`cacheFolder`缓存文件夹中。在下一次运行插件时将首先检查缓存的图像。如果缓存的图像已经存在，则直接使用。如果不存在则将被优化并在下次构建打包时写入到`cacheFolder`。注意：这是一个非常简单的缓存实现，如果你更新这个插件中的配置项，它并不会智能地清除缓存。缓存中的文件可能比图像多很多，这也正常，因为这是延迟使用 imagemin 来确定文件是否是图像的副作用。我们可以通过设置适当的测试正则表达式来避免。示例放到表格后。
onlyUseIfSmaller	`Boolean`	`false`	如果设置为`true`，那么该插件在优化过程中使其变大的话将使用原图。

test的示例：

import ImageminPlugin from 'imagemin-webpack-plugin'

module.exports = {
  plugins: [
    // 对 /images/* 中的所有内容使用默认设置
    new ImageminPlugin({ test: 'images/**' }),
    // 对我的 bigpngs 目录中的所有文件提高优化级别
    new ImageminPlugin({
      test: 'bigpngs/**',
      optipng: {
        optimizationLevel: 9
      }
    })
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

plugins的示例：

import ImageminPlugin from 'imagemin-webpack-plugin'
import imageminMozjpeg from 'imagemin-mozjpeg'

module.exports = {
  plugins: [
    new ImageminPlugin({
      plugins: [
        imageminMozjpeg({
          quality: 100,
          progressive: true
        })
      ]
    })
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

externalImages的示例：

import ImageminPlugin from 'imagemin-webpack-plugin'
import glob from 'glob'

module.exports = {
  plugins: [
    new ImageminPlugin({
      externalImages: {
        context: 'src', // 重要！该项告诉插件基于哪里设置路径
        sources: glob.sync('src/images/**/*.png'),
        destination: 'src/public/images',
        fileName: '[path][name].[ext]' // (filePath) => filePath.replace('jpg', 'webp') 也行
      }
    })
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

maxFileSize的示例：

import ImageminPlugin from 'imagemin-webpack-plugin'
import glob from 'glob'

module.exports = {
  plugins: [
    new ImageminPlugin({
      maxFileSize: 10000, // 仅应用于小于等于10kb的文件
      jpegtran: { progressive: false }
    }),
    new ImageminPlugin({
      minFileSize: 10000, // 仅应用于大于10kb
      jpegtran: { progressive: true }
    })
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

cacheFolder的示例：

import resolve from 'path'
import ImageminPlugin from 'imagemin-webpack-plugin'

module.exports = {
  plugins: [
    new ImageminPlugin({
      cacheFolder: resolve('./cache'), // 使用当前目录中名为cache的现有文件夹
    })
  ]
}

1
2
3
4
5
6
7
8
9
10

排障

如果您在使用SVGO时遇到类似于Error in parsing SVG: Unquoted attribute value的报错，那么您很可能在SVG图像中有未加引号的属性。你可以在这里找到一个解决方案。他们还汇报了一个问题，在这里

← webpack-inject-plugin svg-sprite-webpack-plugin →