多图预警!!! 此篇博文共 5 张图(托管在 GitHub)，国内用户请移步>>>原文. 或者来我的小站哦

0. 课程源码和资料

本次课程的代码目录(如下图所示)：

>>> 本节课源码

>>> 所有课程源码

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

• 图片处理 和 Base64编码
• 图片压缩
• 合成雪碧图

1. 准备工作

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

剩下的内容交给webpack打包处理即可。样式文件和入口 js 文件的代码分别如下所示：

/* base.css */ *, body {   margin: 0;   padding: 0; } .box {   height: 400px;   width: 400px;   border: 5px solid #000;   color: #000; } .box div {   width: 100px;   height: 100px;   float: left; } .box .ani1 {   background: url("./../assets/imgs/1.jpg") no-repeat; } .box .ani2 {   background: url("./../assets/imgs/2.jpg") no-repeat; } .box .ani3 {   background: url("./../assets/imgs/3.png") no-repeat; }

// app.js import "style-loader/lib/addStyles"; import "css-loader/lib/css-base";  import "./css/base.css";

在处理图片和进行base64编码的时候，需要使用url-loader。

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

而postcss-loader和postcss-sprites则用来合成雪碧图，减少网络请求。

因此，在 npm 安装完相关插件后，package.json