Vue-cli3.0下的雪碧图插件webpack-spritesmith配置方法

在前端项目中，为了减少对图片的请求次数，一般而言需要进行雪碧图的配置。即将多张小图标合并成一张图片，这样页面中的小图标都在一张图片上，只需请求一张图片，就可以通过CSS设置各个小图标的显示，利于节省带宽和资源。

雪碧图插件一般还支持快速引用小图标，例如当我们需要在html中放入service.png这张图片时，我们只需要使用<i class="icon icon-service"></i>这样的简单引入方式，省去了繁琐的引入图片的样式编写，大大提升效率。

在Vue-cli 3.0项目中常用webpack-spritesmith进行相关配置，该插件的文档不太直观，并且文档中基于webpack，而vue-cli 3.0的配置是与webpack有所差异的。本文着眼于探讨基于vue-cli3.0项目的该插件的配置方法，使用vue-cli3.0的链式操作进行配置示例。

安装

npm i webpack-spritesmith

引入

const path = require('path');
 
const SpritesmithPlugin = require('webpack-spritesmith');

使用插件

const templateFunction = function(data) {
  var shared = ".icon { display: inline-block; vertical-align: middle; background-image: url(I) }".replace(
    "I",
    data.sprites[0].image
  );

  var perSprite = data.sprites
    .map(function(sprite) {
      return ".icon-N { width: Wpx; height: Hpx; background-position: Xpx Ypx; }"
        .replace("N", sprite.name)
        .replace("W", sprite.width)
        .replace("H", sprite.height)
        .replace("X", sprite.offset_x)
        .replace("Y", sprite.offset_y);
    })
    .join("\n");

  return shared + "\n" + perSprite;
};

module.exports = {
  chainWebpack: config => {
    // 将小图标拼接成雪碧图
    config.plugin("webpack-spritesmith").use(Spritesmith, [
      {
        src: {
          cwd: "./src/assets/images/icon/",
          glob: "*.png"
        },
        target: {
          image: "./src/assets/images/sprite/sprite.png",
          css: [
            [
              path.resolve(__dirname, "./src/assets/scss/icon/_sprite.scss"),
              {
                // 引用自己的模板
                format: "function_based_template"
              }
            ]
          ]
        },
        apiOptions: {
          cssImageRef: "../../images/sprite/sprite.png"
        },
        customTemplates: {
          function_based_template: templateFunction
        },
        spritesmithOptions: {
          algorithm: "binary-tree",
          padding: 10
        }
      }
    ]);
  }
}

参数说明

• src 配置创建雪碧图的源文件

  – cwd 要创建雪碧图的源文件夹

  – glob 要创建雪碧图的源文件类型

即将src.cwd路径下的所有匹配src.glob的源文件生成雪碧图。以上案例中，./src/assets/images/icon/路径下的所有.png文件都会拼接到雪碧图。

• target 配置生成的雪碧图文件

  – img 生成的雪碧图路径和文件名

  – css 引用生成的雪碧图的样式文件的路径和模板等配置

在上述案例中，生成的雪碧图的路径是../src/assets/images/sprite/sprite.png，生成的引用雪碧图的样式文件的路径是./src/assets/scss/icon/_sprite.scss，并且_sprite.scss中的内容在function_based_template中定义，而function_based_template则在customTemplates中定义。

• apiOptions 可选，配置引用生成的雪碧图的一些细节

  – cssImageRef 配置在样式文件中引用雪碧图的路径

具体来说，虽然target.img已经配置好了生成的雪碧图路径，但是，生成的样式文件_sprite.scss中，还需要通过scss引用雪碧图，比如background-image: url(../../images/sprite/sprite.png),因此需要使用apiOptions.cssImageRef设置background-image引用雪碧图的路径。

• customTemplates 可选，配置生成样式文件的样式模板

具体来说，我们在target.css选项中，将format设置为“function_based_template”，那么，最终生成的样式文件中的内容将是样式模板function_based_template定义的形式。function_based_template便需要在customTemplates 中定义。

以上案例中，function_based_template的值是templateFunction，那么将按templateFunction中的返回值生成样式内容。即生成的全是.icon {…} .icon-N{…}的形式。

案例中之所以这样设计，是为了方便直接在html中使用<i class='icon icon-N'></i>的形式，这样将直接加载出对应的图标，其中N是图标的名称。

• spritesmithOptions 可选， spritesmith的配置。

spritesmith是另一个插件，webpack-spritesmith使用了spritesmith。spritesmithOptions 选项用来配置在spritesmith中可用的那些配置。

   – algorithm 配置生成雪碧图的算法。比如设为“binary-tree”，则雪碧图看起来正正方方，还可以设为top-down、left-right、diagonal、alt-diagonal，不同值之间拼接小图标的方式不同，因此最终的雪碧图形状不同。

   – padding 配置雪碧图中小图标之间的间距，可根据需要设置。