Webpack3之雪碧图插件（WEBPACK-SPRITESMITH配置简述）

WEBPACK-SPRITESMITH配置简述

前注：

文档全文请查看 根目录的文档说明。

若是能够，请给本项目加【Star】和【Fork】持续关注。

有疑义请点击这里，发【Issues】。

DEMO

0、使用说明

安装：

npm install
复制代码

运行：

// 开发模式（推荐使用这个）
npm run dev

// 打包到dist目录
npm run build
复制代码

单独安装 webpack-spritesmith：（因为有雪碧图，因此记得，至少要有 file-loader）

npm i --save webpack-spritesmith
复制代码

一、概述

webpack-spritesmith 简单来讲，就是把小图片拼成雪碧图，而后经过 css 类引入（不再须要你本身写雪碧图的css，和在ps里面拼雪碧图了）。

咱们以前用 url-loader 来将图片转base64字符串，这是另一种解决方案，听说雪碧图的性能更好一些。

使用说明：

1. 将小图片放到某一个文件夹；
2. 经过配置拿到这个文件夹下，后缀名符合要求（本身配置）的全部图片；
3. 自动生成雪碧图和 css 文件，并插入到配置好的文件夹内；
4. css 文件自动引入了雪碧图（须要自行配置相对路径）；
5. 用户引入 css 文件，而后使用指定类便可；

二、配置

【这里不是英文文档的直接翻译】，示例参照DEMO

一、src 简单来讲，这个属性用于配置你从哪里捕获这些小图片。这就意味着，你须要把加入雪碧图的图片，单独放到某一个文件夹。

cwd 
必填
就是小图片所在的目录啦，注意，不会递归子目录（即子目录里的会被无视）

glob 
必填
类型是字符串，语法是glob语法（相似正则语法），有点像loader匹配符合要求的文件名。
复制代码

二、target 输出文件的配置

image 
必填
把雪碧图输出到哪（须要带文件名）（注意这里不是指打包后，而是指打包前，实际打包仍是被url-loader处理的）

css 
必填
输出的css文件，能够是字符串、或者数组（若是是数组的话，输出多个一样的文件）
复制代码

三、apiOptions 配置属性

generateSpriteName 
可选，
是一个函数，有一个参数（是文件的绝对路径，字符串），默认值是返回文件名（不含后缀和路径）。
这个用于命名类名，默认是文件名做为类名

cssImageRef 
必填，
生成的图片在 API 中被引用的路径。
简单来讲，就是你上面输出了 image 和 css ，那么在 css 用什么样的路径书写方式来引用 image 图片（能够是别名，或相对路径）

handlebarsHelpers 
可选
是一个对象，而且是全局的（意味着后面的本插件的这个配置会覆盖前面的配置）。
给 handlebars 用的，没搞懂，但通常用不上。
复制代码

四、spritesmithOptions 可选，配置 spritesmith 用的。里面能够定制好比雪碧图的排列方向。

五、retina 可选，retina 屏的配置。略略略。

关于解决 retina 屏的雪碧图的问题，能够参考这个 Retina屏下的CSS雪碧图，因此最好给 spritesmithOptions.padding 属性赋值 2。

这个属性用于图片放大缩小。

六、customTemplates

可选，

这个应该是指用户自定义 css 模板，

官方参考模板是：/node_modules/spritesheet-templates/lib/templates/css.template.handlebars这个文件。

三、问题答疑

【问题一】为何每一个类名都以.icon-开头？

【答】由于其使用的是 handlebars 模板 node_modules/spritesheet-templates/lib/templates/css.template.js

而后模板中 selector 的值是被 node_modules/spritesheet-templates/lib/templates/css.template.js 处理过的。

【问题二】我如何更改雪碧图的 css 模板？

【答】参考问题一中，给的 css 模板，而后本身在 customTemplates 去修改。