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 配置雪碧图中小图标之间的间距，可根据需要设置。

巴特西

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

最新文章

热门文章