手把手教你webpack3(15)插件之雪碧图插件(WEBPACK-SPRITESMITH配置简述)
2018-01-15 00:55
435 查看
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
1、概述
webpack-spritesmith简单来说,就是把小图片拼成雪碧图,然后通过 css 类引入(再也不需要你自己写雪碧图的css,和在ps里面拼雪碧图了)。
我们之前用
url-loader来将图片转base64字符串,这是另外一种解决方案,据说雪碧图的性能更好一些。
使用说明:
将小图片放到某一个文件夹;
通过配置拿到这个文件夹下,后缀名符合要求(自己配置)的所有图片;
自动生成雪碧图和 css 文件,并插入到配置好的文件夹内;
css 文件自动引入了雪碧图(需要自行配置相对路径);
用户引入 css 文件,然后使用指定类即可;
2、配置
【这里不是英文文档的直接翻译】,示例参照DEMO1、src 简单来说,这个属性用于配置你从哪里捕获这些小图片。这就意味着,你需要把加入雪碧图的图片,单独放到某一个文件夹。
cwd 必填 就是小图片所在的目录啦,注意,不会递归子目录(即子目录里的会被无视) glob 必填 类型是字符串,语法是glob语法(类似正则语法),有点像loader匹配符合要求的文件名。
2、target 输出文件的配置
image 必填 把雪碧图输出到哪(需要带文件名)(注意这里不是指打包后,而是指打包前,实际打包还是被url-loader处理的) css 必填 输出的css文件,可以是字符串、或者数组(如果是数组的话,输出多个同样的文件)
3、apiOptions 配置属性
generateSpriteName 可选, 是一个函数,有一个参数(是文件的绝对路径,字符串),默认值是返回文件名(不含后缀和路径)。 这个用于命名类名,默认是文件名作为类名 cssImageRef 必填, 生成的图片在 API 中被引用的路径。 简单来说,就是你上面输出了 image 和 css ,那么在 css 用什么样的路径书写方式来引用 image 图片(可以是别名,或相对路径) handlebarsHelpers 可选 是一个对象,并且是全局的(意味着后面的本插件的这个配置会覆盖前面的配置)。 给 handlebars 用的,没搞懂,但一般用不上。
4、spritesmithOptions 可选,配置 spritesmith 用的。里面可以定制比如雪碧图的排列方向。
5、retina 可选,retina 屏的配置。略略略。
关于解决 retina 屏的雪碧图的问题,可以参考这个 Retina屏下的CSS雪碧图,所以最好给 spritesmithOptions.padding 属性赋值 2。
这个属性用于图片放大缩小。
6、customTemplates
可选,
这个应该是指用户自定义 css 模板,
官方参考模板是:
/node_modules/spritesheet-templates/lib/templates/css.template.handlebars这个文件。
3、问题答疑
【问题一】为什么每个类名都以.icon-开头?
【答】因为其使用的是 handlebars 模板
node_modules/spritesheet-templates/lib/templates/css.template.js
然后模板中
selector的值是被
node_modules/spritesheet-templates/lib/templates/css.template.js处理过的。
【问题二】我如何更改雪碧图的 css 模板?
【答】参考问题一中,给的 css 模板,然后自己在 customTemplates 去修改。
相关文章推荐
- 手把手教你webpack3(10)Less-Loader配置简述
- 手把手教你webpack3(11)PostCSS-Loader配置简述
- 手把手教你webpack3(9)File-Loader配置简述
- Webpack常用配置、插件总结
- 手把手教你webpack、react和node.js环境配置(下篇)
- WebPack安装-使用-Loader-配置-插件-环境-排错详解(中)
- WebPack安装-使用-Loader-配置-插件-环境-排错详解(下)
- WebPack安装-使用-Loader-配置-插件-环境-排错详解(下扩展)
- Webpack中雪碧图插件使用详解
- 手把手教你webpack3(8)url-Loader配置简述
- 手把手教你webpack、react和node.js环境配置(上篇)
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
- WebPack安装-使用-Loader-配置-插件-环境-排错详解(上)
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
- [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
- [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
- webpack写jquery插件的环境配置
- (笔记)webpack安装、配置、简单的项目打包、插件介绍
- 手把手教你webpack3(12)VUE-LOADER配置简述
- [js高手之路]深入浅出webpack教程系列5-插件使用之html-webpack-plugin配置(中)