本次课程的代码目录(如下图所示)：
本节课会讲述 webpack4 中的图片常用的基础操作：
1. 准备工作
如项目代码目录展示的那样，除了常见的 app.js 作为入口文件，我们将用到的 3 张图片放在 /src/assets/img/ 目录下，并在样式文件 base.css 中引用这些图片。
剩下的内容交给 webpack 打包处理即可。样式文件和入口 js 文件的代码分别如下所示：
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;
}
css-loader/lib/css-base";
import "./css/base.css";
在处理图片和进行 base64 编码的时候，需要使用 url-loader 。
在压缩图片的时候，要使用 img-loader 插件，并且针对不同的图片类型启用不同的子插件。
而 postcss-loader 和 postcss-sprites 则用来合成雪碧图，减少网络请求。
因此，在 npm 安装完相关插件后， package.json 的内容如下所示：
css-loader": "^1.0.0","extract-text-webpack-plugin": "^4.0.0-beta.0","file-loader": "^1.1.11","imagemin": "^5.3.1","imagemin-pngquant": "^5.1.0","img-loader": "^3.0.0","postcss-loader": "^2.1.6","postcss-sprites": "^4.2.1","style-loader": "^0.21.0","url-loader": "^1.0.1","webpack": "^4.16.1"
}
}
同时，我们编写如下 index.html (假设已经打包好了项目文件，现在直接引入)：
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
Document
Box">
