作为前端构建工具不可或缺的一个环节，自动生成css sprites图片不仅仅能够减少频繁的人工操作，还能够避免多人协作时对同一个sprites图片维护过程中因个人原因引起的图片不规范问题。58到家前端工程化解决方案boi的自动css sprites功能基于webpack实现，本文记录一下实现方案的各个细节以及需要注意的地方。
1. 功能需求
css sprites的功能需求简单说就是将style中引用的散列小图标合并成一张sprites图片。从功能角度来讲比较单一，从实现角度来讲需要具备以下几点：
- 对style文件进行资源依赖分析，能够得出style中引用的图片资源；
- style文件引用的图片并非都是图标，其他的比如背景图等资源不应该被sprites合并。所以必须有明确的标识可以区分图标与非图标资源。
对于第一点，webpack本身就具备依赖分析的功能，所以无需自行实现。那么如何设计明确的标识以便区分资源类型呢？
2. 用户至上的设计原则
上文提到的资源标识，我们首先看一下业内的同类产品是如何实现的。以fis为例，请看以下代码：
li.list-1::before { background-image: url('./img/list-1.png?__sprite'); } li.list-2::before {
延伸阅读
- ssh框架
2016-09-30
- 阿里移动安全 [无线安全]玩转无线电——不安全的蓝牙锁
2017-07-26
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe
2024-03-26
- Selective Search for Object Recognition 论文笔记【图片目标分割】
2017-07-26
- 词向量-LRWE模型-更好地识别反义词同义词
2017-07-26
- 从栈不平衡问题 理解 calling convention
2017-07-26
- php imagemagick 处理 图片剪切、压缩、合并、插入文本、背景色透明
2017-07-26
- Swift实现JSON转Model - HandyJSON使用讲解
2017-07-26
- 阿里移动安全 Android端恶意锁屏勒索应用分析
2017-07-26
- 集合结合数据结构来看看(二)
2017-07-26
学习是年轻人改变自己的最好方式