浅谈webpack4 图片处理汇总

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

>>> 本节课源码

>>> 所有课程源码

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

1. 图片处理 和 Base64编码
2. 图片压缩
3. 合成雪碧图

1. 准备工作

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

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

rush:css;"> /* 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; }

rush:js;"> // 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 的内容如下所示：

rush:js;"> { "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 (假设已经打包好了项目文件，现在直接引入)：

rush:xhtml;"> <Meta charset="UTF-8"> <Meta name="viewport" content="width=device-width,initial-scale=1.0"> <Meta http-equiv="X-UA-Compatible" content="ie=edge">

Box">

2. 图片处理 和 Base64 编码

2.1 webpack 配置

为了方便样式提取，还是利用 extract-text-webpack-plugin 来提取样式文件。

同时，在 module.rules 选项中进行配置，以实现让 loader 识别图片后缀名，并且进行指定的处理操作。

代码如下：

rush:js;"> // 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 的图片文件：

打开浏览器的控制台，我们的图片已经被成功编码：

3. 图片压缩

3.1 压缩配置

图片压缩需要使用 img-loader ，除此之外，针对不同的图片类型，还要引用不同的插件。比如，我们项目中使用的是 png 图片，因此，需要引入 imagemin-pngquant ，并且指定压缩率。

我们只需要在上面的配置文件中将下方代码：

rush:js;"> // ... { test: /\.(png|jpg|jpeg|gif)$/,use: [ { loader: "url-loader",options: { name: "[name]-[hash:5].min.[ext]",// size <= 20KB publicPath: "static/",outputPath: "static/" } } ] } // ...

替换为下方代码即可，因为执行顺序问题，我们将 url-loader 的 limit 设置成 1kb，来防止压缩后的 png 图片被 base64 编码：

rush:js;"> // ... { test: /\.(png|jpg|jpeg|gif)$/,limit: 1000,// size <= 1KB publicPath: "static/",outputPath: "static/" } },// img-loader for zip img { loader: "img-loader",options: { plugins: [ require("imagemin-pngquant")({ quality: "80" // the quality of zip }) ] } } ] } // ...

3.2 打包结果

运行 webpack 打包，查看打包结果：

是的，如你所见，10.5kb 大小的迅雷图标，被压缩到了 1.8kb。图片信息可以去 github 上查看，在文章开头有提及 github 地址。

3.3 遗留问题

并没有解决 jpg 格式图片压缩。根据 img-loader 的官方文档 ，安装了 imagemin-mozjpeg 插件。

但是这个插件的最新版本是 7.0.0 ，然而配置后，webpack 启动会用报错。

查看了 github 上的 issue，我将版本回退到 6.0.0 。可以安装，也可以配置运行，正常打包。但是打包后的 jpg 图片大小并没有变化，也就是说，并没有被压缩！！！

希望有大佬可以指点一下小生，万分感谢

4. 合成雪碧图

4.1 webpack 配置

在之前的基础上，配置还是很简单的，loader 的引入和环境变量都在注释里面了：

rush:js;"> const path = require("path"); const ExtractTextPlugin = require("extract-text-webpack-plugin");

let extractTextPlugin = new ExtractTextPlugin({
filename: "[name].min.css",allChunks: false
});

/* sprites config *****/
let spritesConfig = {
spritePath: "./dist/static"
};
/**/

module.exports = {
entry: {
app: "./src/app.js"
},use: [
{
loader: "css-loader"
},/* loader for sprites *****/
{
loader: "postcss-loader",options: {
ident: "postcss",plugins: [require("postcss-sprites")(spritesConfig)]
}
}
/*****/
]
})
},limit: 10000,outputPath: "static/"
}
},{
loader: "img-loader",options: {
plugins: [
require("imagemin-pngquant")({
quality: "80"
})
]
}
}
]
}
]
},plugins: [extractTextPlugin]
};

4.2 效果展示

按照我们的配置，打包好的雪碧图被放入了 /dist/static/ 目录下，如下图所示：

4.3 雪碧图的实际应用

雪碧图是为了减少网络请求，所以被处理雪碧图的图片多为各式各样的 logo 或者大小相等的小图片。而对于大图片，还是不推荐使用雪碧图。

除此之外，雪碧图要配合 css 代码进行定制化使用。要通过 css 代码在雪碧图上精准定位需要的图片（可以理解成从雪碧图上裁取需要的图片），更多可以百度或者 google。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文地址：https://www.jb51.cc/js/30284.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：JS中判断字符串存在和非空的方法下一篇：React 项目迁移 Webpack Babel7的实