写一个webpack中雪碧图的loader

在项目的开发中其实对于小素材的使用优化，有几种不同的方法

已经将写成了 loader : https://www.npmjs.com/package/cssprite-loader 

 git  : https://github.com/soGooday/cssprite-loaderr 

分别是

1. 使用base64 这个的好处是直接与文本在一起，减少向服务器段请求资源的链接通信的时间。不好的是每次刷新页面，都会冲i重新下载刷新。
2. 使用icon小图标，这个的方式也是大家采用的，但是只用于icon小图标，对于大一些的素材，来说并不能使用
3. 使用SVG素材，优势1任意放缩 2文本独立 3较小文件 4超强显示效果  svg不是所有浏览器都能支持，点击这里查看兼容性
4. 就是雪碧图是的使用，将小的素材打包成为一张图片，然后使用图片上的素材，好处是减少向服务端请求的数量，加快首屏

 

准备

1. 本文假设你已经熟悉怎么去书写有个webpacak的loader ，其实不会也没有关系，因为挺简单的，webpack看下了解思路就好
2. 我们需要使用到  spritesmith 这个是他的git ,这个是他的npm
3. loader中的 this.context 指的是资源的路径最外层路径，不是webpack的根路径
4. loader中的 this.resourcePath 指被处理的文件的路径
5. 对正则表达式的基本使用

需求

我们的需求是 在css中使用了 url(../img/test.png?sp_1) 发现?后面是一个文本的，则我们就认为这个是被放图p_1.png的雪碧图中的小碎图

没有则认为不需要放入雪碧图中。同时需要强调的是，我们需要?可以随意是sp_1也可以是sp_2或者其他什么的，可以没有，可以一个，也可是共存多个(但是在一个url(../img/test.png?sp_1)只能存在一个？，不能是url(../img/test.png?sp_1)？sp_2)之所以这样是，是因为那样我们就没办法区分，这个图片到底要被打成哪张的雪碧图）

比较

这个是原始的代码，也就是需要处理的代码

#one1{
    width: 321px;
    height: 83px;
    background: url(./img/results-btn-y.png?sp_1);  
    background-repeat: no-repeat;
}
#one2{
    width: 285px;
    height: 77px;
    background: url(./img/reward-btn-1-1.png?sp_1);  
    background-repeat: no-repeat;
}
#one3{
    width: 285px;
    height: 77px;
    background: url(./img/reward-btn-1-2.png?sp_2);  
    background-repeat: no-repeat;
}
#one4{
    width: 285px;
    height: 77px;
    background: url(./img/reward-btn-2-1.png);  
    background-repeat: no-repeat;
}

最终转化为如下css的代码

#one1{
    width: 321px;
    height: 83px;
    background: url(img/sp_1.png) 0px -0px; 
    background-size: 321px 160px;  
    background-repeat: no-repeat;
}
#one2{
    width: 285px;
    height: 77px;
    background: url(img/sp_1.png) 0px -83px; 
    background-size: 321px 160px;
    background-repeat: no-repeat;
}
#one3{
    width: 285px;
    height: 77px;
    background: url(img/sp_2.png) 0px -0px; 
    background-size: 285px 77px;;  
    background-repeat: no-repeat;
}
#one4{
    width: 285px;
    height: 77px;
    background: url(img/reward-btn-2-1.png);  
    background-repeat: no-repeat;
}

思路

1，我们这个这个loader，一定要放在紧接着cssl-loader的后。然后我们能取到最纯正的css文本，因为有些是有使用less与sass的预编译的。

2，取到文本通过对url的解析从而拿到。那些存在url的css的{}中的样式内容

3，取到样式内容之后，我们需要将其中的路径取出来。这样我们就能配合this.context，就能知道当前的图片在什么位置。

 

dome代码已经完成了，但是我需要将这个功能与我们的框架匹配起来。此文章会继续往后写的