手把手教你webpack3(15)插件之雪碧图插件(WEBPACK-SPRITESMITH配置简述)
WEBPACK-SPRITESMITH配置简述
前注:
文档全文请查看 根目录的文档说明。
如果可以,请给本项目加【Star】和【Fork】持续关注。
有疑义请点击这里,发【Issues】。
DEMO
0、使用说明
安装:
npm install
运行:
// 开发模式(推荐使用这个)
npm run dev// 打包到dist目录
npm run build
单独安装 webpack-spritesmith:(由于有雪碧图,所以记得,至少要有 file-loader
)
npm i --save webpack-spritesmith
1、概述
webpack-spritesmith
简单来说,就是把小图片拼成雪碧图,然后通过 css 类引入(再也不需要你自己写雪碧图的css,和在ps里面拼雪碧图了)。
我们之前用 url-loader
来将图片转base64字符串,这是另外一种解决方案,据说雪碧图的性能更好一些。
使用说明:
- 将小图片放到某一个文件夹;
- 通过配置拿到这个文件夹下,后缀名符合要求(自己配置)的所有图片;
- 自动生成雪碧图和 css 文件,并插入到配置好的文件夹内;
- css 文件自动引入了雪碧图(需要自行配置相对路径);
- 用户引入 css 文件,然后使用指定类即可;
2、配置
【这里不是英文文档的直接翻译】,示例参照DEMO
1、src 简单来说,这个属性用于配置你从哪里捕获这些小图片。这就意味着,你需要把加入雪碧图的图片,单独放到某一个文件夹。
cwd
必填
就是小图片所在的目录啦,注意,不会递归子目录(即子目录里的会被无视)glob
必填
类型是字符串,语法是glob语法(类似正则语法),有点像loader匹配符合要求的文件名。
2、target 输出文件的配置
image
必填
把雪碧图输出到哪(需要带文件名)(注意这里不是指打包后,而是指打包前,实际打包还是被url-loader处理的)css
必填
输出的css文件,可以是字符串、或者数组(如果是数组的话,输出多个同样的文件)
3、apiOptions 配置属性
generateSpriteName
可选,
是一个函数,有一个参数(是文件的绝对路径,字符串),默认值是返回文件名(不含后缀和路径)。
这个用于命名类名,默认是文件名作为类名cssImageRef
必填,
生成的图片在 API 中被引用的路径。
简单来说,就是你上面输出了 image 和 css ,那么在 css 用什么样的路径书写方式来引用 image 图片(可以是别名,或相对路径)handlebarsHelpers
可选
是一个对象,并且是全局的(意味着后面的本插件的这个配置会覆盖前面的配置)。
给 handlebars 用的,没搞懂,但一般用不上。
4、spritesmithOptions 可选,配置 spritesmith 用的。里面可以定制比如雪碧图的排列方向。
5、retina 可选,retina 屏的配置。略略略。
关于解决 retina 屏的雪碧图的问题,可以参考这个 Retina屏下的CSS雪碧图,所以最好给 spritesmithOptions.padding 属性赋值 2。
这个属性用于图片放大缩小。
6、customTemplates
可选,
这个应该是指用户自定义 css 模板,
官方参考模板是:/node_modules/spritesheet-templates/lib/templates/css.template.handlebars
这个文件。
3、问题答疑
【问题一】为什么每个类名都以.icon-
开头?
【答】因为其使用的是 handlebars 模板 node_modules/spritesheet-templates/lib/templates/css.template.js
然后模板中 selector
的值是被 node_modules/spritesheet-templates/lib/templates/css.template.js
处理过的。
【问题二】我如何更改雪碧图的 css 模板?
【答】参考问题一中,给的 css 模板,然后自己在 customTemplates 去修改。
手把手教你webpack3(15)插件之雪碧图插件(WEBPACK-SPRITESMITH配置简述)相关推荐
- Webpack3之雪碧图插件(WEBPACK-SPRITESMITH配置简述)
WEBPACK-SPRITESMITH配置简述 前注: 文档全文请查看 根目录的文档说明. 如果可以,请给本项目加[Star]和[Fork]持续关注. 有疑义请点击这里,发[Issues]. DEMO ...
- 雪碧图PHP,Webpack中雪碧图插件使用详解
背景 在开发过程中,我们需要用到很多图标,这些图标的大小不是很大,但是每次需要向服务器发送请求,从而加重服务器的负担,尤其是当网站处于高访问量的情况下或网络不稳定的时候,服务器性能会明显下降.这种情况 ...
- html网站雪碧图素材,webpack雪碧图实现(webpack管理小图标素材)
雪碧图也叫CSS精灵, 是一CSS图像合成技术,这里介绍webpack实现雪碧图 这是我的文件目录: // 在上个实例项目上增加了icons文件夹: // dist/sprites/目录是后面执行we ...
- 雪碧图sprity 合并多图使用心得
介绍 sprity 是一个模块化的雪碧图生成工具 会根据目录中的图片生成相应的雪碧图和样式文件,支持retina图,可以内嵌base64 编码格式的图,支持不同的图片格式和有不同的图片引擎可以选择. ...
- gulp 雪碧图制作
var gulp = require('gulp'); var spritesmith = require('gulp.spritesmith'); gulp.task('sprites',funct ...
- gulp代码压缩和制作雪碧图
安装nodejs gulp是基于nodejs,需要安装nodejs 在 [ nodejs官网 ]下载并安装nodejs 查看nodejs版本 安装完nodejs后,在命令行中(window + r 输 ...
- grunt压缩雪碧图
grunt 打包雪碧图 插件grunt-spritesmith 简易配置 // 项目配置(任务配置)grunt.initConfig({// 读取我们的项目配置并存储到pkg属性中pkg: grunt ...
- JAVA自动生成雪碧图sprites和样式CSS文件(包含原始图标CSS、雪碧图CSS)
在项目的开发过程中,如果一个页面有很多的小图标展现.浏览器展示页面时会向后台服务器发送很多的请求获取对应的图片,这样既浪费资源,也使得页面的加载变得很慢,影响客户的体验.此时我们可以采用将这些小图标放 ...
- 一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite)
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite) 一.什么是雪碧图? 雪碧图(CSS Sprite)又叫CSS精灵图,是一种网页图片应用处理方式,他允许你将一个页面设计到 所有零星图片 ...
最新文章
- BP反向传播算法的思考和直观理解 -卷积小白的随机世界
- 网站推广中哪些优化方法是不利于搜索引擎网站推广的呢?
- CubieBoard开发板不用ttl线也不用hdmi线的安装方法
- rust(49)-图像(2)
- 基于Licode的WebRTC全球分布式架构
- mysql数据库优先_MySQL数据库配置文件之优先级
- 逆透视变换详解 及 代码实现(二)
- Linux学习(六):命令与文件的查阅,Root用户和个人用户使用which命令的差别...
- 聚焦数智技术助力乡村振兴 京东云为乡村振兴注入“数智”力量
- 用python输出所有的玫瑰花数_用Python爬取WordPress官网所有插件
- Java基础篇:什么是线程优先级?
- 计算机联锁论文致谢,计算机联锁系统 毕业设计论文 定稿.doc
- JS语法之:require
- Nvidia AGX Xavier Jetson 开机配置
- 主编编辑器如何插入动图?
- 用C/C++实现网络监听抓包
- 【图像分割】基于计算机视觉实现胸部CT肺质提取附matlab代码
- 骑缝章 Java_Java 在PDF中添加骑缝章
- 激动人心!昨晚,这场盛会在青岛开幕!
- python暴力破解压缩包密码(python暴力破解zip压缩包)