基於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. 配置

官方配置說明相對清晰友好，點擊文檔