webpack4图片处理的示例分析
这篇文章给大家分享的是有关webpack4图片处理的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
成都创新互联主营勐海网站建设的网络公司,主营网站建设方案,成都App制作,勐海h5成都小程序开发搭建,勐海网站营销推广欢迎勐海等地区企业咨询
代码目录(如下图所示):
讲述 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
(假设已经打包好了项目文件,现在直接引入):
Document