使用 webpack 进行图片文件处理
作者：Seiya
时间：2019年07月10日
准备
使用 webpack 进行图片处理时，需要依赖以下几个插件：
file-loader：用于处理文件（主要是处理文件名和路径）；url-loader：可以用于处理图片和字体，可以设置较小资源自动 base64 编码；url-loader 依赖 file-loader，当使用 url-loader 加载图片，图片大小小于上限值，则将图片转 base64 字符串（使用 url-loader 加载图片比 file-loader 更优秀）；否则使用 file-loader 加载图片，都是为了提高浏览器加载图片速度。
img-loader：压缩图片；postcss-loader：一个用 JavaScript 转换 css 的工具；postcss-sprites：合成雪碧图，减少网络请求；
图片处理和 Base64 编码
我们通过配置 webpack 来实现图片处理和 base64 编码。为了方便样式提取，还是利用 extract-text-webpack-plugin 来提取样式文件。同时，在module.rules选项中进行配置，以实现让 loader 识别图片后缀名，并且进行指定的处理操作。如下所示：
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编码。
图片压缩
图片压缩需要使用 img-loader，除此之外，针对不同的图片类型，还要引用不同的插件。比如，我们项目中使用的是 png 图片，因此，需要引入imagemin-pngquant，并且指定压缩率：
{
loader: "img-loader",
options: {
plugins: [
require("imagemin-pngquant")({
quality: [0.5, 0.8] // the quality of zip
})
]
}
}
合成雪碧图
在之前的基础上，配置还是很简单的，如下所示：
/*********** sprites config ***************/
let spritesConfig = {
spritePath: "./dist/static"
};
/******************************************/
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: {
loader: "style-loader"
},
use: [
{
loader: "css-loader"
},
/*********** loader for sprites ***************/
{
loader: "postcss-loader",
options: {
ident: "postcss",
plugins: [require("postcss-sprites")(spritesConfig)]
}
}
/*********************************************/
]
})
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: "url-loader",
options: {
name: "[name]-[hash:5].min.[ext]",
limit: 10000, // size <= 20KB
publicPath: "",
outputPath: "static/"
}
},
{
loader: "img-loader",
options: {
plugins: [
require("imagemin-pngquant")({
quality: "80"
})
]
}
}
]
}
]
}
雪碧图是为了减少网络请求，所以被处理雪碧图的图片多为各式各样的 logo 或者大小相等的小图片。而对于大图片，还是不推荐使用雪碧图。
除此之外，雪碧图要配合 css 代码进行定制化使用。要通过 css 代码在雪碧图上精准定位需要的图片（可以理解成从雪碧图上裁取需要的图片）