imagemin-webpack-plugin 使用教程

1. 项目的目录结构及介绍

imagemin-webpack-plugin/
├── src/
│   ├── index.js
├── examples/
│   ├── basic/
│   │   ├── webpack.config.js
│   │   ├── src/
│   │   │   ├── images/
│   │   │   │   ├── example.png
├── package.json
├── README.md

• src/: 包含插件的主要源代码文件。
  • index.js: 插件的入口文件。
• examples/: 包含插件的使用示例。
  • basic/: 基础示例。
    • webpack.config.js: 示例的Webpack配置文件。
    • src/: 示例的源代码目录。
      • images/: 示例图片文件夹。
        • example.png: 示例图片文件。
• package.json: 项目的依赖和脚本配置文件。
• README.md: 项目的说明文档。

2. 项目的启动文件介绍

项目的启动文件位于 src/index.js，这是插件的入口文件。它导出了一个类 ImageminPlugin，用于在Webpack构建过程中压缩图片。

import ImageminPlugin from 'imagemin-webpack-plugin';

module.exports = {
  plugins: [
    new ImageminPlugin({
      disable: process.env.NODE_ENV !== 'production', // 开发模式禁用
      pngquant: {
        quality: '95-100'
      }
    })
  ]
};

3. 项目的配置文件介绍

项目的配置文件位于 examples/basic/webpack.config.js，这是一个基础示例的Webpack配置文件。它展示了如何使用 imagemin-webpack-plugin 插件来压缩图片。

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

module.exports = {
  plugins: [
    new CopyWebpackPlugin([
      { from: 'src/images/', to: 'images/' }
    ]),
    new ImageminPlugin({
      test: /\.(jpe?g|png|gif|svg)$/i,
      pngquant: {
        quality: '95-100'
      }
    })
  ]
};

在这个配置文件中，CopyWebpackPlugin 用于复制图片文件夹，而 ImageminPlugin 用于优化这些图片。ImageminPlugin 的配置项包括 test 和 pngquant，分别用于指定要处理的文件类型和压缩质量。