文章简要：
1、图片处理 和 Base64编码
2、图片压缩
3、合成雪碧图
4、处理字体
图片处理
安装url-loader
cnpm i url-loader --save-dev //url-loader包含了file-loader
配置loader
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: [{ loader: "url-loader", options: { limit: 5000, //小于该值的图片会使用base64编码，5000/1024k大约5kb name: '[name].[hash:8].[ext]', //打包后的图片名称 [ext]指图片格式 outputPath: "static/img/"//这个是图片输出地址，图片路径不对时候需要注意 } }] }
图片压缩
首先安装需要的loader（img-loader），需要压缩哪些图片格式还需要要安装对应的loader，这里统一安装全部（基本是）
npm install img-loader imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo imagemin --save-dev
配置loader
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: [{ loader: "url-loader", options: { limit: 5000, //小于该值的图片会使用base64编码，5000/1024k大约5kb name: '[name].[hash:8].[ext]', //打包后的图片名称 [ext]指图片格式 outputPath: "static/img/"//这个是图片输出地址，图片路径不对时候需要注意 } },{ loader: 'img-loader', options: { plugins: [ require('imagemin-mozjpeg')({//这个是处理图片的格式jpeg，需要处理哪些格式都需要在此配置， quality: "80" // 压缩质量，这个是压缩图片80% }), require('imagemin-pngquant')({ floyd: 0.5, speed: 2 }) ] } } }] }
处理字体
{ test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, use: [ { loader: "url-loader", options: { name: '[name].[hash:8].[ext]', limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file outputPath: "static/fonts/" //文字输出路径 } } ] }
处理字体跟处理图片用的都是url-loader，所以有时候放在一起配置也是可以的。
雪碧图处理
有2种方法，这里我们用postcss-loader的插件postcss-sprites，首先安装
cnpm i postcss-sprites --save-dev
配置loader
{ loader: "postcss-loader", options: { ident: "postcss", plugins: [require("postcss-sprites")({ spritePath: "./dist/static/img", })] } }
打包就可以看到效果。这样做其实还有很多问题，怎么引用？怎么设置样式呢？
推荐一篇文章，讲的很详细：
http://www.yvonne.party/2019/07/07/webpack-sprites/
本文关于css的处理是提取css到一个文件，打包到dist/static/css文件夹下
打包后的目录如下：
打包后目录.png
顺带说下处理css的loader配置如下：（为了说明路径）
{ test:/\.(sa|sc|c)ss$/, use: [ { loader: MiniCssExtractPlugin.loader,//MiniCssExtractPlugin.loader options: { publicPath: '../../', //这个地方要注意 } }, { loader: "css-loader" // 将 CSS 转化成 CommonJS 模块 }, { loader: "sass-loader" // 将 Sass 编译成 CSS }, { loader: "postcss-loader" // 将 Sass 编译成 CSS } ] }
需要注意的是 css的输出路径publicPath: '../../'，这个路径一定要配置正确，关系到图片和字体的引用路径。
看上图打包后的目录图片，我css打包后在static/css/文件夹下，所以我这里publicPath: '../../'
