基于webpack的自动化集成雪碧图并压缩方案Demo演示（postcss-sprites）

点击查看Github完整Demo

1、目标

实现项目构建时图片的最优性能方案：自动合并雪碧图并压缩全部图片
雪碧图方案：postcss-sprites
图片压缩方案：image-webpack-loader
复制代码

2、如何体验

一、安装与启动

npm install
    npm run start
复制代码

二、页面展现

2、依赖能力

postcss-sprites 自动转换css中依赖的各类本地图片，并自动替换当前图片的css样式
image-webpack-loader 压缩各类格式图片
复制代码

3、postcss-sprites 配置介绍

stylesheetPath

保存输出样式表的文件夹的相对路径。若是它为null，将使用CSS文件的路径

• 默认值: null
• 是否必传: false

spritePath

保存输出spritesheet的文件夹的相对路径

• 默认值: ./
• 是否必传: true

basePath

您的基本路径将用于具备绝对CSS网址的图像

• 默认值: ./
• 是否必传: false

relativeTo

指示url是否应该与当前CSS上下文或原始CSS样式表文件相对，Options: file|rule

• 默认值: file
• 是否必传: false

filterBy

定义过滤器函数，用于处理样式表中建立的图像列表，每一个函数都必须返回一个Promise应该被解析或拒绝的函数。

• 默认值: []
• 是否必传: false

groupBy

定义将操做样式表中建立的图像列表的组函数，每一个函数都必须返回一个Promise应该用字符串解析或拒绝的函数

• 默认值: []
• 是否必传: false

retina

定义是否在文件名中搜索视网膜标记

• 默认值: false
• 是否必传: false

hooks

钩子函数配置

• 默认值: {}
• 是否必传: false

hooks.onSaveSpritesheet

容许重写生成的spritesheet数据的钩子。若是返回值为string，则将其用做文件路径值，若是返回值为object，则将其用做将与当前spritesheet数据合并的值。返回值也能够是Promise，它应返回字符串或对象。

• 默认值: null
• 是否必传: false

hooks.onUpdateRule

容许重写图像的CSS输出

• 默认值: null
• 是否必传: false

spritesmith

雪碧图配置

• 默认值: {}
• 是否必传: false

spritesmith.engine

配置雪碧图转换引擎

• 默认值: pixelsmith
• 是否必传: false

spritesmith.algorithm

配置雪碧图算法

• 默认值: binary-tree
• 是否必传: false

spritesmith.padding

配置雪碧图间隔的空间

• 默认值: 0
• 是否必传: false

spritesmith.engineOpts

引擎默认参数配置

• 默认值: {}
• 是否必传: false

spritesmith.exportOpts

引擎导出选项

• 默认值: {}
• 是否必传: false

svgsprite

生成SVG的基础配置，具体事例见连接 github.com/jkphl/svg-s…

verbose

将插件输出打印到控制台。

• 默认值: false
• 是否必传: false

4、image-webpack-loader

1. 效果

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

2. 配置

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