前端开发的过程中,会有很多的小图标.
一般这些小图片都是以 .png结尾的背景透明的图片.
这些小图标一般应用于一些按钮或者其他元素的图片.
比如有一个按钮,需要一个相机的小图标.
我们可能需要设置这样的 css 代码.
.css
.bg {
background-image:url('../images/bg/btn.png');
bacground-position: center;
background-size: cover;
background-repeat: no-repeat;
}
<button class='bg'>按钮</button>
首先,一般这些小图片的大小都很小.
但不管有多小,都是一个http请求.
如果页面上的需要用到小图标的地方很多.
比如有N个(假如是N张不同的小图片).
那么就会有N个请求小图标的http请求.
然而,浏览器的HTTP请求个数是有限制的.
这样做无疑会浪费HTTP请求资源.
常规做法
之前的前端会让设计师把所有的小图标布局到一张图片中.
比如像下面这样.
然后前端工程师,就根据这一张图片,来设置不同元素需要的背景图片.
这里主要是搭配 background-poistion:x,y 来设置.
具体的样式内容大概一般会是下面这个样子.
.icon-Snip20190227_108 {
background-image: url(../sprites/sprite.png);
background-position: 0px 0px;
width: 55px;
height: 55px;
}
.icon-Snip20190227_109 {
background-image: url(../sprites/sprite.png);
background-position: 0px -57px;
width: 69px;
height: 66px;
}
.icon-Snip20190227_112 {
background-image: url(../sprites/sprite.png);
background-position: 0px -125px;
width: 71px;
height: 66px;
}
.icon-Snip20190227_111 {
background-image: url(../sprites/sprite.png);
background-position: 0px -193px;
width: 67px;
height: 67px;
}
.icon-Snip20190227_110 {
background-image: url(../sprites/sprite.png);
background-position: 0px -262px;
width: 68px;
height: 68px;
}
.icon-Snip20190227_113 {
background-image: url(../sprites/sprite.png);
background-position: 0px -332px;
width: 66px;
height: 69px;
}
然后在界面中,直接使用.
<div class="icon-Snip20190227_109"></div>
<div class="icon-Snip20190227_112"></div>
这样做法的好处.
- 图片资源只有一个,所以请求的
HTTP只有一次. - 即使第二个
div的css中,又再次请求了一次background-image: url(../sprites/sprite.png);但实际上,这张图片已经被第一个div请求过来,并被浏览器缓存了.所以,第二个div背景图片资源实际上是来自浏览器缓存.
这样做法的麻烦点
- 要事先和设计师沟通,把所有需要用到的小图标,都集成在一张图片中.
- 我们需要拿到这张图片,利用
ps等工具测量图标的大小,以及在整个图片中的x,y坐标. - 最后,我们还需要为此编写一个特定的
.css文件.
使用 webpack-spritesmith 插件
使用 webpack-spritesmith 插件,简化了上述麻烦的步骤.
我们只需要提供指定目录下的一堆小图片.
它就能帮我们做如下的事情.
- 把零散的小图标生成一张大图.(多个http请求变成一个)
- 测量大图的中每一个小图标的大小以及位置,帮我们生成对应的
.css文件.(不用我们自己测量尺寸和位置以及编写.css文件)
step 1.
安装 webpack-spritesmith@1.0.0 插件
step 2.
在 webpack.config.js 中导入此插件,并设置一些此插件的相关配置.
const WebpackSpritesmithPlugin = require('webpack-spritesmith')
// webpack.config.js
plugins: [
// 雪碧图插件
new WebpackSpritesmithPlugin({
// 目标小图标
src: {
// 小图标路径
cwd: path.join(__dirname, 'src/assets/icons'),
// 匹配小图标文件后缀名
glob: '*.png'
},
target: {
// 生成雪碧图(大图)文件存放路径
image: path.join(__dirname, 'dist/sprites/sprite.png'),
// 对应的样式文件存放路径
css: path.join(__dirname, 'dist/sprites/sprites.css')
},
// 样式文件中,调用雪碧图的写法????
apiOptions: {
cssImageRef: '../sprites/sprite.png'
},
// 雪碧图生成算法
spritesmithOptions: {
algorithm: 'top-down', // 从上到下生成方向.
padding: 2// 每个小图标之间的间隙
}
})
]
step 3.
安装 html-wepack-plugin 插件
npm i --save-dev html-wepack-plugin@3.2.0
提供 html-webpack-plugin 生成依照的模块文件index.template.html
由于,使用 webpack-spritesmith 是帮助我们生成了一个.css文件,而非我利用 import require 等方式导入文件.所以 html-webpack-plugin 不会帮我们在生成的 index.html 文件里,自动导入这个样式文件.
所以,我们需要在给 html-webpack-plugin 插件提供的依赖模板中,手动指定生成来的样式文件
所以需要设置一下 html-webpack-plugin 插件的 template 参数
const WebpackHtmlPlugin = require('html-webpack-plugin')
// 自动生成 index.html 并自动引用生成的资源文件插件
plugins:[ // 一些其他的插件配置.
new WebpackHtmlPlugin({
template:'index.template.html'
})]
这里的路径写的是 <link rel="stylesheet" href="./sprites/sprites.css">.
是因为,我们在指定 webpack-spritesmith.target.css的路径是存放在 dist 目录下.
css: path.join(__dirname, 'dist/sprites/sprites.css')
最后运行 npm run build
查看结果
/*
Icon classes can be used entirely standalone. They are named after their original file names.
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>
*/
.icon-Snip20190227_108 {
background-image: url(sprite.png);
background-position: 0px 0px;
width: 55px;
height: 55px;
}
.icon-Snip20190227_109 {
background-image: url(sprite.png);
background-position: 0px -53px;
width: 69px;
height: 66px;
}
.icon-Snip20190227_112 {
background-image: url(sprite.png);
background-position: 0px -117px;
width: 71px;
height: 66px;
}
.icon-Snip20190227_111 {
background-image: url(sprite.png);
background-position: 0px -181px;
width: 67px;
height: 67px;
}
.icon-Snip20190227_110 {
background-image: url(sprite.png);
background-position: 0px -246px;
width: 68px;
height: 68px;
}
.icon-Snip20190227_113 {
background-image: url(sprite.png);
background-position: 0px -312px;
width: 66px;
height: 69px;
}
webpack-spritesmith 插件,帮我们把执行目录的小图标集成在了一张大图中.
并帮我们生成了对应的 .css 文件.
现在开始使用
新建一个 index.js 作为 webpack 打包的路口文件.
在里面键入
document.getElementById('root').classList.add('icon-Snip20190227_108')
document.getElementById('second').classList.add('icon-Snip20190227_112')
document.getElementById('btn').classList.add('icon-Snip20190227_108')
然后运行 npm run build
最后点击打开 index.html 文件.
此致. webpack-spritesmith 搭配 html-webpack-plugin 的使用过程就结束了.
为什么图标外围有很色边框,可能是因为我没有素材,利用截图工具随便在网上截的一些图.尺寸可能没有截好.截取下来的那部分位置背景本来就是黑色的，它包括在了图片当中。
