前言
我們在開發網站的時候，通常會把常用的圖示合併成css sprite(雪碧圖)，可以有效的減少站點的http請求數量，從而提高網站效能。
下面讓我們一起來學習一下如何使用webpack合併sprite圖。
準備
webpackwebpack-spritesmith外掛file-loadersass-loader(因為webpack-spritesmith除了生成雪碧圖之外，還會生成相應的mixin，使用起來很方便，所以要用sass)- 這裡我還使用了
ExtractTextPlugin來提取css檔案，這不是必須的你也可以不用，用的話需要安裝extract-text-webpack-plugin這個外掛
使用npm安裝好上面的東西
下面請開始我們的表演
step1:將我們要合併的圖示準備好，放在src下的ico資料夾下
給大家分享一個好用的icon下載網站，裡面的圖示風格我很喜歡，而且是免費的哦，大家也可以到裡面去下載自己喜歡的icon用於本次練習
這是我下載的png圖片
step2 在你的webpack.config.js中按下面這樣編寫
const path = require('path');
const SpritesmithPlugin = require('webpack-spritesmith');
module.export = {
// ...
module: {
rules: [
{
test: /png$/
loader:[
'file-loader?name=i/[hash].[ext]'
]
},
{
test: /\.(css|scss)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'postcss-loader', 'sass-loader']
})
}
]
},
resolve: {
modules: [
'node_modules',
'assets/sprite' //css在哪裡能找到sprite圖
]
},
plugins: [
new SpritesmithPlugin({
src: {
cwd: path.resolve(__dirname, 'src/ico'), //準備合併成sprit的圖片存放資料夾
glob: '*.png' //哪類圖片
},
target: {
image: path.resolve(__dirname, 'src/assets/sprites.png'), // sprite圖片儲存路徑
css: path.resolve(__dirname, 'src/assets/_sprites.scss') // 生成的sass儲存在哪裡
},
apiOptions: {
cssImageRef: "~sprite.png" //css根據該指引找到sprite圖
}
})
]
}複製程式碼step3 在你的scss檔案中@import匯入生成的檔案
@import '../../../assets/sprite/_sprite.scss'; //路徑請自行更改
.facebook{
@include sprite($facebook);
}
.twitter{
@include sprite($twitter);
}
.google{
@include sprite($google);
}複製程式碼step4 執行webpack，看到我們的sprite圖已經被用在我們的站點上了
/assets/sprite/sprite.png就是我們生成的sprite圖了
看看同時生成的sass檔案
// SCSS variables are information about icon's compiled state, stored under its original file name
//
// .icon-home {
// width: $icon-home-width;
// }
//
// The large array-like variables contain all information about a single icon
// $icon-home: x y offset_x offset_y width height total_width total_height image_path;
//
// At the bottom of this section, we provide information about the spritesheet itself
// $spritesheet: width height image $spritesheet-sprites;
$facebook-name: 'facebook';
$facebook-x: 0px;
$facebook-y: 0px;
$facebook-offset-x: 0px;
$facebook-offset-y: 0px;
$facebook-width: 64px;
$facebook-height: 64px;
$facebook-total-width: 128px;
$facebook-total-height: 128px;
$facebook-image: '~sprite.png';
$facebook: (0px, 0px, 0px, 0px, 64px, 64px, 128px, 128px, '~sprite.png', 'facebook', );
$google-name: 'google';
$google-x: 64px;
$google-y: 0px;
$google-offset-x: -64px;
$google-offset-y: 0px;
$google-width: 64px;
$google-height: 64px;
$google-total-width: 128px;
$google-total-height: 128px;
$google-image: '~sprite.png';
$google: (64px, 0px, -64px, 0px, 64px, 64px, 128px, 128px, '~sprite.png', 'google', );
$twitter-name: 'twitter';
$twitter-x: 0px;
$twitter-y: 64px;
$twitter-offset-x: 0px;
$twitter-offset-y: -64px;
$twitter-width: 64px;
$twitter-height: 64px;
$twitter-total-width: 128px;
$twitter-total-height: 128px;
$twitter-image: '~sprite.png';
$twitter: (0px, 64px, 0px, -64px, 64px, 64px, 128px, 128px, '~sprite.png', 'twitter', );
$spritesheet-width: 128px;
$spritesheet-height: 128px;
$spritesheet-image: '~sprite.png';
$spritesheet-sprites: ($facebook, $google, $twitter, );
$spritesheet: (128px, 128px, '~sprite.png', $spritesheet-sprites, );
// The provided mixins are intended to be used with the array-like variables
//
// .icon-home {
// @include sprite-width($icon-home);
// }
//
// .icon-email {
// @include sprite($icon-email);
// }
//
// Example usage in HTML:
//
// `display: block` sprite:
// <div class="icon-home"></div>
//
// To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
//
// // CSS
// .icon {
// display: inline-block;
// }
//
// // HTML
// <i class="icon icon-home"></i>
@mixin sprite-width($sprite) {
width: nth($sprite, 5);
}
@mixin sprite-height($sprite) {
height: nth($sprite, 6);
}
@mixin sprite-position($sprite) {
$sprite-offset-x: nth($sprite, 3);
$sprite-offset-y: nth($sprite, 4);
background-position: $sprite-offset-x $sprite-offset-y;
}
@mixin sprite-image($sprite) {
$sprite-image: nth($sprite, 9);
background-image: url(#{$sprite-image});
}
@mixin sprite($sprite) {
@include sprite-image($sprite);
@include sprite-position($sprite);
@include sprite-width($sprite);
@include sprite-height($sprite);
}
// The `sprites` mixin generates identical output to the CSS template
// but can be overridden inside of SCSS
//
// @include sprites($spritesheet-sprites);
@mixin sprites($sprites) {
@each $sprite in $sprites {
$sprite-name: nth($sprite, 10);
.#{$sprite-name} {
@include sprite($sprite);
}
}
}複製程式碼最後看看應用在網站上的效果
總結
好了，以上就是webpack生成css sprite的辦法了，是不是覺著很簡單呢，如果本文對您有幫助，請記得點個贊哦。
本文由張小點於2017-10-3發表於掘金，轉載請註明出處。原文連結
參考