webpack优化构建体积示例-压缩图片：

小强有个dream

已于 2024-05-16 17:36:42 修改

阅读量456

点赞数 5

文章标签： webpack 前端 node.js

于 2024-05-16 15:02:26 首次发布

本文链接：https://blog.csdn.net/qq_36413371/article/details/138959023

版权

不同的图片格式有不同的特点和用途，它们也需要不同的压缩算法和技术，也为了保证能在各个浏览器环境下能正常加载显示，所以需要用到多个插件

在使用imagemin-webpack-plugin来配置图片压缩时，你需要确保已经安装了该插件以及它可能依赖的imagemin插件（如imagemin-mozjpeg、imagemin-pngquant等）。

下载imagemin-webpack-plugin插件可能会遇到以下问题
1. 找不到 raw.githubusercontent.com
在hosts配置 103.224.182.242 raw.githubusercontent.com
并刷新hosts重试
2. Error: pngquant failed to build, make sure that libpng-dev is installed
执行npm install --global --production windows-build-tools 
记得同时下载对应版本的python
3.  × Error: Command failed: C:\Windows\system32\cmd.exe /s /c "autoreconf -ivf"
得去visualstudio官网下载安装对应的工具

src/index.js
// 处理什么类型图片换成什么格式
import Img from './images/test.png'

const img = document.createElement('img')
const body = document.querySelector('body')

img.scr = Img
img.style.height = '200px'
img.style.width = '200px'
body.appendChild(img)

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

一：通过imagemin-pngquant压缩png

处理png前

const HtmlWebpackPlugin = require('html-webpack-plugin');  
  
module.exports = {
    // ... 其他配置 ...  
    plugins: [  
        new HtmlWebpackPlugin({  
            template: './index.html',  
        }),  
    ],  
    // ... 其他配置 ...  
    module: {  
        rules: [  
            {  
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,  
                type: 'asset/resource',  
            }  
        ]  
    },  
    // 确保你设置了正确的模式  
    mode: 'production'  
};

在这里插入图片描述

处理png后

const HtmlWebpackPlugin = require('html-webpack-plugin');  
const ImageminPlugin = require('imagemin-webpack-plugin').default;  
const imageminPngquant = require('imagemin-pngquant');  
  
module.exports = {
    // ... 其他配置 ...  
    plugins: [  
        new HtmlWebpackPlugin({  
            template: './index.html',  
        }),  
        // new ImageminPlugin({  
        //     // 启用缓存  
        //     cache: true,  
        //     // 插件配置数组  
        //     optimizer: [  
        //         imageminPngquant({  
        //             quality: [0.65, 0.9], // 注意：pngquant 的 quality 通常是一个数组，但通常在这个插件中不需要数组  
        //             speed: 4 // 速度，范围1-11  
        //         }),  
        //         // 其他 imagemin 插件配置...  
        //     ],  
        //     // 匹配要处理的图片文件  
        //     // 注意：这个 test 选项可能在 imagemin-webpack-plugin 的新版本中不再需要  
        //     // test: /\.(jpe?g|png|gif|svg)(\?.*)?$/i,  
        // }),  
        // ... 其他插件 ...  
    ],  
    // ... 其他配置 ...  
    module: {  
        rules: [  
            {  
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,  
                type: 'asset/resource',  
                // 如果你想要对图片进行额外的处理，可以在这里使用 loader，比如 'url-loader' 或 'file-loader'（但它们在 webpack 5 中已经被废弃）  
                // generator: {  
                //     filename: 'images/[name][hash][ext]'  
                // }  
            }  
        ]  
    },  
    // 确保你设置了正确的模式  
    mode: 'production'  
};

在这里插入图片描述

webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const imageminMozjpeg = require('imagemin-mozjpeg');  
const imageminPngquant = require('imagemin-pngquant');  
// const imageminSvgo = require('imagemin-svgo');  

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './index.html',
      }),
          // 使用imagemin-webpack-plugin对图片进行压缩  
    new ImageminPlugin({  
      // 匹配要处理的图片文件  
      test: /\.(jpe?g|png|gif|svg)(\?.*)?$/i,  
      // 压缩选项  
      pngquant: {  
        quality: [0.65, 0.9], // 压缩级别，范围0-1  
        speed: 4 // 速度，范围1-11  
      },  
      optipng: {  
        optimizationLevel: 7 // 0-7的优化级别  
      },  
      gifsicle: {  
        interlaced: true, // 是否隔行扫描gif进行模糊效果  
        optimizationLevel: 3 // 0-3的优化级别  
      },  
      jpegtran: {  
        progressive: true, // 是否无损压缩  
      },  
      mozjpeg: {  
        quality: 65, // 图片质量，范围0-100  
        progressive: true // 是否启用渐进式编码  
      },  
      svgo: {  
        plugins: [  
          { removeViewBox: false },  
          { cleanupIDs: false }  
          // 可以添加更多SVGO插件配置  
        ]  
      },  
      // 如果你不需要使用额外的imagemin插件，可以省略plugins属性  
      plugins: [  
        imageminMozjpeg(),  
        imageminPngquant({  
          quality: [0.6, 0.8],  
        }),  
        // 自定义插件...  
      ],  
      // 其他配置...  
      // 例如，设置输出目录、文件名哈希等  
      // output: {  
      //   path: 'path/to/output',  
      //   filename: '[name].[hash:8].[ext]'  
      // },  
      // 启用gzip压缩，如果你需要的话  
      // gzip: {  
      //   level: 9,  
      //   options: {  
      //     // gzip options  
      //   }  
      // },  
      // 启用webp格式转换，如果你需要的话  
      // webp: {  
      //   quality: 75  
      // }  
    }),  
    ],
    mode: 'production',
    module: {
      rules: [
        {
          test: /\.(png|jepg|gif|svg)(\?.*)?$/,
          type: 'asset/resource'
        }
      ]
    }
}