当前位置: 首页 > 知识库问答 >
问题:

webpack - webapck5 图片压缩方法?

戚兴邦
2024-04-23

webpack 5 loader里面用 assetwebpack5内置的文件资源模块)已经对图片等资源进行加工处理

  {                  test: /\.(png|svg|jpg|jpeg|gif)$/i,                  type: 'asset/resource',   }

现在想对图片进行统一压缩处理,用什么插件或loader比较好?

共有1个答案

尉迟宇定
2024-04-23

在Webpack 5中,你可以使用image-webpack-loader插件来进行图片压缩。这个插件可以在图片被打包之前进行压缩,从而减小最终打包文件的大小。

首先,你需要安装image-webpack-loader。你可以通过npm或yarn来安装它:

npm install --save-dev image-webpack-loader# 或者yarn add --dev image-webpack-loader

然后,在你的webpack配置文件中,你可以像下面这样使用image-webpack-loader

module.exports = {  // ...  module: {    rules: [      {        test: /\.(png|svg|jpg|jpeg|gif)$/i,        use: [          {            loader: 'image-webpack-loader',            options: {              mozjpeg: {                quality: 75, // JPEG图片的质量,取值范围0-100              },              pngquant: {                quality: [0.6, 0.8], // PNG图片的质量,取值范围0-1              },              gifsicle: {                interlaced: false, // 是否进行交错处理              },              // 其他选项...            },          },          {            loader: 'file-loader',            options: {              name: '[path][name].[ext]',              outputPath: 'dist/assets',              useRelativePaths: true,            },          },        ],      },    ],  },  // ...};

在上面的配置中,image-webpack-loader被添加到了处理图片的规则中。options字段中的mozjpegpngquantgifsicle等选项分别用于配置JPEG、PNG和GIF图片的压缩参数。你可以根据你的需求来调整这些参数。

注意,image-webpack-loader需要配合file-loaderurl-loader使用,以指定处理后的图片文件的输出路径和其他选项。在上面的例子中,file-loader被用作二级loader来处理image-webpack-loader处理后的图片文件。

最后,当你运行webpack打包命令时,image-webpack-loader将会自动对匹配到的图片文件进行压缩处理。

 类似资料:
  • 本文向大家介绍JNI方法实现图片压缩(压缩率极高),包括了JNI方法实现图片压缩(压缩率极高)的使用技巧和注意事项,需要的朋友参考一下 前言 直接使用项目或直接复制libs中的so库到项目中即可(当前只构建了armeabi),需要其他ABI可检下项目另外使用CMake构建即可。 结果预览: 效果图.png   jni_278KB.png quality_484KB.png sample_199KB

  • compressImage 压缩图片接口(安卓10.0.12版本支持,ios 10.0.15版本支持) 使用方法 AlipayJSBridge.call('compressImage', { apFilePaths: ["https://resource/apmlcc0ed184daffc5a0d8da86b2f518cf7b.image"], compressLevel: 4 }, f

  • 本文向大家介绍Android图片压缩(质量压缩和尺寸压缩),包括了Android图片压缩(质量压缩和尺寸压缩)的使用技巧和注意事项,需要的朋友参考一下 在网上调查了图片压缩的方法并实装后,大致上可以认为有两类压缩:质量压缩(不改变图片的尺寸)和尺寸压缩(相当于是像素上的压缩);质量压缩一般可用于上传大图前的处理,这样就可以节省一定的流量,毕竟现在的手机拍照都能达到3M左右了,尺寸压缩一般可用于生成

  • 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 使用 gulp 压缩 JS 访问论坛获取帮助 压缩 图片文件可降低文件大小,提高图片加载速度。 找到规律转换为 gulp 代码 规律 找到 images/ 目录下的所有文件,压缩它们,将压缩后的文件存放在 dist/images/ 目录下。 gulp 代码 你可以 下载所有示例代码 或 在线查看代码 一、安装 gulp-imagemi

  • 本文向大家介绍C#无损压缩图片,包括了C#无损压缩图片的使用技巧和注意事项,需要的朋友参考一下 话不多说,请看代码: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!

  • 本文向大家介绍Android中3种图片压缩处理方法,包括了Android中3种图片压缩处理方法的使用技巧和注意事项,需要的朋友参考一下 Android中图片的存在形式: 1:文件形式:二进制形式存在与硬盘中。 2:流的形式:二进制形式存在与内存中。 3:Bitmap的形式 三种形式的区别: 文件形式和流的形式:对图片体积大小并没有影响。也就是说,如果你手机SD卡上的图片通过流的形式读到内存中,在内