多图预警!!! 此篇博文共 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的内容如下所示：
{ "devDependencies": { "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(假设已经打包好了项目文件，现在直接引入)：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link href="http://www.likecs.com/dist/app.min.css"> </head> <body> <div> <div> <div></div> <div></div> <div></div> </div> </div> <script src="http://www.likecs.com/dist/app.bundle.js"></script> </body> </html> 2. 图片处理 和 Base64 编码 2.1 webpack 配置为了方便样式提取，还是利用extract-text-webpack-plugin来提取样式文件。
同时，在module.rules选项中进行配置，以实现让 loader 识别图片后缀名，并且进行指定的处理操作。
代码如下：
// webpack.config.js const path = require("path"); const ExtractTextPlugin = require("extract-text-webpack-plugin"); let extractTextPlugin = new ExtractTextPlugin({ filename: "[name].min.css", allChunks: false }); module.exports = { entry: { app: "./src/app.js" }, output: { publicPath: __dirname + "/dist/", path: path.resolve(__dirname, "dist"), filename: "[name].bundle.js", chunkFilename: "[name].chunk.js" }, module: { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: { loader: "style-loader" }, use: [ { loader: "css-loader" } ] }) }, { test: /\.(png|jpg|jpeg|gif)$/, use: [ { loader: "url-loader", options: { name: "[name]-[hash:5].min.[ext]", limit: 20000, // size <= 20KB publicPath: "static/", outputPath: "static/" } } ] } ] }, plugins: [extractTextPlugin] };通过配置url-loader的 limit 选项，可以根据图片大小来决定是否进行base64编码。这次配置的是：小于 20kb 的图片进行base64编码。
2.2 打包结果之前提到过，在项目中引入了 3 张图片，其中3.png是小于 20kb 的图片。在命令行中运行webpack进行打包，size 小于 20kb 的图片被编码，只打包了 2 个 size 大于 20kb 的图片文件：
打开浏览器的控制台，我们的图片已经被成功编码：
图片压缩需要使用img-loader，除此之外，针对不同的图片类型，还要引用不同的插件。比如，我们项目中使用的是 png 图片，因此，需要引入imagemin-pngquant，并且指定压缩率。
我们只需要在上面的配置文件中将下方代码：
// ... { test: /\.(png|jpg|jpeg|gif)$/, use: [ { loader: "url-loader", options: { name: "[name]-[hash:5].min.[ext]", limit: 20000, // size <= 20KB publicPath: "static/", outputPath: "static/" } } ] } // ...