webpack雪碧图生成

top

前言

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

目标

先说下我们希望达到的效果。

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

src

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

img

3、雪碧图从上到下的方式排列,并且每个图标间隔20px,如图所示

icon

4、在sass中编写,按需合并。

sass

5、编译后得到的样式如下,包括width、height也一同输出

style

 

常见方案

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

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

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

use

这种通过注释的方式来识别并不是很好。

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

解决方案

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

url

这里主要利用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. });            

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

sort

  1. Spritesmith.run({src: sprites,algorithm:'top-down',padding: 20}, function handleResult (err, result) {

  2.    if(err) {

  3.        throw err;

  4.    }

  5. });  

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

result

利用这些信息我们可以对返回的样式进行重新处理,满足前面第5点的样式要求

  1. let imageW = image.width;

  2. let imageH = image.height;

  3. if(mobile){

  4.    imageW = imageW/2;

  5.    imageH = imageH/2;

  6. }

  7. let imgWidth = 'width:' + imageW + 'px;';

  8. let imgHeight = 'height:' + imageH + 'px;';

  9. if(i < afterContent.length) {

  10.    if(afterContent[i] == ';') {

  11.        end = i + 1;

  12.        afterContent = afterContent.substring(0, end) + backgroundSize+ imgWidth+ '\n' + imgHeight + afterContent.substring(end);

  13.    } else {

  14.        end = i;

  15.        afterContent = afterContent.substring(0, end) + ';\n' +  backgroundSize +imgWidth+ '\n' + imgHeight+ afterContent.substring(end);

  16.    }

  17. }

  18. let imagePosX = image.x;

  19. let imagePosY = image.y;

  20. if(mobile){

  21.    imagePosX = imagePosX/2;

  22.    imagePosY = imagePosY/2;

  23. }

  24. let imageX = image.x == 0 ? ' 0' : ' -' + imagePosX + 'px';

  25. let imageY = image.y == 0 ? ' 0' : ' -' + imagePosY + 'px';

  26. let imagePosition = '';

  27. if(image.x || image.y){

  28.    imagePosition = imageX + imageY;

  29. }

  30. 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

https://github.com/Klchan-me/srpite

发表评论