浅谈webpack4图片处理汇总

时间：2021-08-30 来源：互联网编辑：宝哥软件园浏览：次

本次课程的代码目录（如下图所示):

本节课源码

所有课程源码

本节课会讲述webpack4中的图片常用的基础操作：

图片处理和Base64编码图片压缩合成雪碧图1.准备工作

如项目代码目录展示的那样，除了常见的app.js作为入口文件，我们将用到的3张图片放在/src/assets/img/目录下，并在样式文件base.css中引用这些图片。

剩下的内容交给工具打包处理即可。样式文件和入口射流研究…文件的代码分别如下所示：

/* base.css */*，body { margin : 0；padd : 0；}.box { height: 400px宽度： 400像素；border: 5px固体# 000;color: # 000}。box div { width: 100px高度： 100像素；向左浮动：}.box .ani1 { background: url(' ././assets/imgs/1。jpg’)不重复；}.box .ani2 { background: url(' ././assets/imgs/2。jpg’)不重复；}.box .ani3 { background: url(' ././assets/imgs/3.png ')不重复；}//app。jsimport ' style-loader/lib/addStyles '；导入”CSS-loader/lib/CSS-base”；"进口"。/CSS/base。CSS '；在处理图片和进行base64编码的时候，需要使用全球资源定位器(Uniform Resource Locator)加载程序。

在压缩图片的时候，要使用img-装载机插件，并且针对不同的图片类型启用不同的子插件。

而后置装载机和波斯特-雪碧则用来合成雪碧图，减少网络请求。

因此，在新公共管理安装完相关插件后，package.json的内容如下所示：

{“devdependencies”: {“CSS-loader”: '^1.0.0',"extract-text-web打包插件”: '^4.0.0-beta.0',"file-loader": '^1.1.11',"imagemin": '^5.3.1',"imagemin-pngquant": '^5.1.0',"img-loader": '^3.0.0',"postss-loader": '^2.1.6',"postss-sprites": '^4.2.1',"style-loader"3:同时，我们编写如下index.html(假设已经打包好了项目文件，现在直接引入):

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title link rel='样式表href=' ./dist/app。量滴CSS ' rel='外部无跟随'/头体div id=' app ' div class=' box ' div class=' ani1 '/div class=' ani2 '/div class=' ani3 '/div/div/div脚本src='http:/dist/app。捆绑。js '/脚本/正文/html 2 .图片处理和Base64编码

2.1 webpack配置

为了方便样式提取，还是利用提取-文本-网络包-插件来提取样式文件。

同时，在模块。规则选项中进行配置，以实现让装货设备识别图片后缀名，并且进行指定的处理操作。

代码如下：

//web pack。配置。jsconst path=require(' path ')；const ext plugin=require(' ext-text-web pack-plugin ')；让ext plugin=new ext plugin({ filename : '[name])。量滴CSS '，所有组块s 3360 false })；模块。导出={ entry : { app : } ./src/app.js' }，输出： {公共路径： _ _ dirname '/dist/'，路径： path。解析(_ dirname，' dist ')，文件名： '[name].bundle.js '，区块文件名： '[name].大块。js ' }，模块： {规则s 3360[{ test :/\ .css$/，使用： extract textplugin。提取({ fallback : { loader : ' style-loader ' }，使用：[{ loader : ' CSS-loader ' }]})}，{ test: /\ .(png|jpg|jpeg|gif)$/，使用：[{ loader : ' URL-loader '，选项： { name : '[name]--has h :5]。量滴[ext]'，limit: 20000，//size=20KB publicath : ' static/'，outputpath 3360 ' static/' } }]})，plugins :[exttextplugin]通过配置全球资源定位器(Uniform Resource Locator)加载程序的限制选项，可以根据图片大小来决定是否进行base64编码。这次配置的是：小于20kb的图片进行base64编码。

2.2 打包结果

如前所述，该项目引入了三幅图片，其中3.png小于20kb。在命令行运行webpack进行打包，对大小小于20kb的图片进行编码，但是只打包了两个大于20kb的图片文件：

打开浏览器的控制台，我们的图片已经编码成功：

3.图像压缩

3.1压缩配置

图像压缩需要Img-loader，另外不同的图像类型需要引用不同的插件。例如，我们的项目使用png图片，因此我们需要引入imagemin-pngquant并指定压缩比。

我们只需要在上面的配置文件中放入以下代码：

//.{ test: /\。(png|jpg|jpeg|gif)$/，use :[{ loader : ' URL-loader '，options : { name : '[name]-[hash :5]. min .[ext]'，限制： 20000，//size=20kb公共路径：' static/'，output path : ' static/' }]//.可以由以下代码替换。由于执行顺序问题，我们将url加载程序的限制设置为1kb，以防止压缩的png图片被base64编码：

//.{ test: /\。(png|jpg|jpeg|gif)$/，use :[{ loader : ' URL-loader '，Options : { name : '[name]-[has h :5]. min .[ext]'，limit: 1000，//size=1KB publipath : ' static/'，outputPath: 'static/' }，//img-loader适用于zip img { loader: 'img.3.2包装结果

运行webpack打包并查看打包结果：

是的，可以看到，10.5kb大小的雷霆图标已经压缩到了1.8kb，图片信息可以在github上查看，文章开头提到了github地址。

3.3遗留问题

它没有解决jpg格式的图像压缩问题。根据img-loader的官方文档，安装了imagemin-mozjpeg插件。

然而，这个插件的最新版本是7.0.0。但是，在配置之后，webpack将开始报告错误。

看看github上的问题，我将版本回滚到了6.0.0。它可以安装或配置为正常运行和打包。但是打包后的jpg图像大小没有变化，也就是没有压缩！

希望一些大佬能给萧声一些建议，非常感谢

4.合成雪碧

4.1 webpack配置

在前面的基础上，配置还是很简单的，加载器和环境变量的介绍都在评论里：

const path=require(' path ')；const ext plugin=require(' ext-text-web pack-plugin ')；让ext plugin=new ext plugin({ filename : '[name])。量滴CSS '，所有组块s 3360 false })；/* * * * * * * * * *精灵配置* * * * * * * * * * * * * * * * * *让spritesConfig={ spritePath: ' ./dist/static ' }；/* * * * * * * * * * * * *模块。导出={ entry : { app : } ./src/app.js' }，输出： {公共路径： _ _ dirname '/dist/'，路径： path。解析(_ dirname，' dist ')，文件名： '[name].bundle.js '，区块文件名： '[name].大块。js ' }，模块： {规则s 3360[{ test :/\ .css$/，使用：提取文本插件。提取({ fallback : { loader : ' style-loader ' }，使用：[{加载器： ' CSS-loader ' }，/***************加载器用于子画面* * * * * * * * * * * * * * * * * * * * * * */{加载器： '后CSS-加载器'，选项3360 { ident: 'postcss '，plugins 3360[require(' post CSS-sprites '))(png | jpg | JPEG | gif)$/，使用：[{ loader : ' URL-loader '，选项： { name : '[name]-[has h :5]。量滴[ext]'，limit: 10000，//size=20KB公共路径3360 ' static/'，输出路径3360 ' static/' }，{ loader: 'img-loader '，选项333:4.2效果展示

按照我们的配置，打包好的雪碧图被放入了/dist/静态/目录下，如下图所示：