webpack雪碧图生成

腾讯DeepOcean原创文章：dopro.io/webpack-spr…

前言

在HTTP/2.0尚未普及的如今，css sprite(雪碧图)还是前端工程化中必备的一环，而随着webpack应用的普及，构建工具切换到webpack后雪碧图该如何处理呢？

目标

先说下咱们但愿达到的效果。

一、须要合成的雪碧图icon统一放在src / assets / sprite文件夹下

二、在src / img 会生成一份以上级目录名称命名的雪碧图，如icon文件夹中用到的图标拼合成icon.png

三、雪碧图从上到下的方式排列，而且每一个图标间隔20px，如图所示

四、在sass中编写，按需合并。

五、编译后获得的样式以下,包括width、height也一同输出

 

常见方案

目前主要的解决方案有两种

一种是以webpack-spritesmith、postcss-sprites为表明的插件，webpack-spritesmith主要的运行方式是会预先把sprite目录中的图标拼合好，页面主要依赖生成后的雪碧图。而postcss-sprites则是经过对已经生成的 CSS 文件进行分析，将其中的 background 或 background-image 做为依赖收集，合并成雪碧图后再将相关参数替换。

第二种是loader处理方式，不过网上基本上没有很好的方案，好比说这种

这种经过注释的方式来识别并非很好。

目前市面上的方案都不能知足咱们的个性化要求，相对于插件针对某一文件夹/文件处理方式，咱们更但愿采用loader链式处理的方式来实现。

解决方案

采用loader的话只能经过添加标记的方式告知须要合成，好比在background url加上“?_sprite”，而后利用正则获取图片路径，给到相关的库去合成。

这里主要利用spritesmith开源项目来进行开发，spritesmith很强大，它能够比较灵活的合成雪碧图，经过相应的API能够得到图标的相关信息。

其中sprites是须要被合成的图片路径，里面包含了图标的绝对路径

1. Spritesmith.run({src: sprites,algorithm:'top-down',padding: 20}, function handleResult (err, result) {
2.    if(err) {
3.        throw err;
4.    }
5. });            

另外还提供了多种排列的规则,以及能够设置图片间的间距

1. Spritesmith.run({src: sprites,algorithm:'top-down',padding: 20}, function handleResult (err, result) {
2.    if(err) {
3.        throw err;
4.    }
5. });  

打印result能够看到返回的数据主要包括图片的绝对路径，坐标、宽高以及雪碧图的Buffer

利用这些信息咱们能够对返回的样式进行从新处理，知足前面第5点的样式要求

1. let imageW = image.width;
2. let imageH = image.height;
3. if(mobile){
4.    imageW = imageW/2;
5.    imageH = imageH/2;
6. }
7.  
8. let imgWidth = 'width:' + imageW + 'px;';
9. let imgHeight = 'height:' + imageH + 'px;';
10.  
11. if(i < afterContent.length) {
12.  
13.    if(afterContent[i] == ';') {
14.        end = i + 1;
15.        afterContent = afterContent.substring(0, end) + backgroundSize+ imgWidth+ '\n' + imgHeight + afterContent.substring(end);
16.    } else {
17.        end = i;
18.        afterContent = afterContent.substring(0, end) + ';\n' +  backgroundSize +imgWidth+ '\n' + imgHeight+ afterContent.substring(end);
19.    }
20.  
21. }
22. let imagePosX = image.x;
23. let imagePosY = image.y;
24. if(mobile){
25.    imagePosX = imagePosX/2;
26.    imagePosY = imagePosY/2;
27. }
28. let imageX = image.x == 0 ? ' 0' : ' -' + imagePosX + 'px';
29. let imageY = image.y == 0 ? ' 0' : ' -' + imagePosY + 'px';
30. let imagePosition = '';
31. if(image.x || image.y){
32.    imagePosition = imageX + imageY;
33. }
34.  
35. let cssVal = 'url("' + spriteRelativePath + '")' + imagePosition;

通常项目中的h5采用的都是双倍图，这里能够增长个判断，若是h5的话则width、height、background-size都减半处理

1. module:{
2.      rules:[
3.          {
4.              test:/\.(scss|css)$/,
5.              use: ExtractTextPlugin.extract({
6.                fallback: "style-loader",
7.                publicPath: '../../',
8.                use: [{
9.                  loader:'css-loader'
10.                },{
11.                  loader:'isprite-loader',
12.                  options:{
13.                    outputPath:'./src/assets/img/',
14.                    mobile:true
15.                  }
16.                },{
17.                  loader:'sass-loader'
18.                }],
19.              })
20.          },
21.      ]
22. }

 

最后

到这里已经基本能达到预期的效果，不过仍有些问题没有处理好，好比每次都会生成雪碧图，这对于编译速度会有必定的影响，针对这种问题，能够采用hash值进行对比，若是文件没有改动的话则不处理。

每个业务都有不一样的需求场景，这种方式可能不必定适用于其余项目，但愿对你们有所帮助。

附上demo

github.com/Klchan-me/s…

欢迎关注"腾讯DeepOcean"微信公众号,每周为你推送前端、人工智能、SEO/ASO等领域相关的原创优质技术文章：

看小编搬运这么辛苦，关注一个呗：)