React>> webpack-image-sprites>> 返回
项目作者： xmyxm

项目描述 ：
基于webpack的自动化集成雪碧图并压缩方案Demo演示（webpack-spritesmith）
高级语言： JavaScript
项目地址: git://github.com/xmyxm/webpack-image-sprites.git
创建时间： 2019-08-22T09:04:29Z
项目社区：https://github.com/xmyxm/webpack-image-sprites
开源协议：
下载


一、目标

  1. 实现项目构建时图片的最优性能方案：自动合并雪碧图并压缩所有图片
  2. 雪碧图方案：webpack-spritesmith
  3. 图片压缩方案：image-webpack-loader

二、如何体验

1、安装与启动

  1.     yarn install
  2.     yarn start

2、构建

  1.     yarn build

3、页面展示

二、依赖能力

  1. webpack-spritesmith 把指定目录下的图片合并成雪碧图且生成一套雪碧图的css，项目中需要使用雪碧图的地方直接引入这个css即可
  2. image-webpack-loader 压缩各种格式图片

三、webpack-spritesmith 配置介绍

1、src 这个属性用于配置你从哪里捕获这些小图片，建议使用时把所有要合并的icon放在同一个文件夹

  1. cwd 
  2. 必填
  3. 就是小图片所在的目录，注意不会递归子目录，子目录图片不会被处理
  6. glob 
  7. 必填
  8. 类型是字符串，也可以是正则，用来匹配符合要求的图片文件

2、target 雪碧图和样式输出文件的配置

  1. image 
  2. 必填
  3. 雪碧图输出完整地址，必须携带文件名及后缀，（注意这里不是指打包后，而是指打包前，实际打包还是被url-loader处理的）
  5. css 
  6. 必填
  7. 输出的css文件，可以是字符串、或者数组（如果是数组的话，输出多个同样的文件）

3、apiOptions 配置属性

  1. generateSpriteName 
  2. 可选，
  3. 是一个函数，有一个参数（是文件的绝对路径，字符串），默认值是返回文件名（不含后缀和路径）。
  4. 这个用于命名类名，默认是文件名作为类名
  6. cssImageRef 
  7. 必填，
  8. 生成的图片在 API 中被引用的路径。
  9. 简单来说，就是你上面输出了 image 和 css ，那么在 css 用什么样的路径书写方式来引用 image 图片（可以是别名，或相对路径）
  11. handlebarsHelpers 
  12. 可选
  13. 是一个对象，并且是全局的（意味着后面的本插件的这个配置会覆盖前面的配置）。
  14. 给 handlebars 用的，没搞懂，但一般用不上。

4、spritesmithOptions 可选，配置 spritesmith 用的。里面可以定制比如雪碧图的排列方向。

5、retina 可选，retina 屏的配置。关于解决 retina 屏的雪碧图的问题，可以参考这个 Retina屏下的CSS雪碧图，所以最好给 spritesmithOptions.padding 属性赋值 2。这个属性用于图片放大缩小。

6、customTemplates 可选，这个应该是指用户自定义 css 模板, 官方有自己的模板，不完全适用这里的Demo，有稍作调整。

四、image-webpack-loader

  1. 效果
    ```
  2. 压缩效率都为 67% 左右和 tinypng 在线压缩数据一致
  3. 压缩之后图片基本无损
  4. 会导致webpack打包时间变长，建议线上压缩
  5. 可配置压缩质量 quality，设为75质量还是不错的，体积可再减小 15%
  6. 观其代码发现图片资源都是本地压缩，安装各类图片的压缩工具
    ```
  7. 配置

官方配置说明相对清晰友好，点击文档

五、说明

因为使用了图片压缩工具 image-webpack-loader , 所以会下载一些压缩图片的代码包，速度较慢，请耐心等待，若下载中断再次下载也是无效的，会导致构建失败