前言:因为要使用精灵图 ,所以学习一下,顺便记录了过程。
1、新建空白目录,然后进入到该目录下,使用命令:npm init --yes 初始化项目;
2、全局安装webpack,或者在该项目中局部安装webpack
安装指令:npm i webpack@3.5.5(注:我安装了3.5.5,也可以安装其他版本的)
3、在项目中建立JS文件作为入口文件,名字随便命名,内容如下:
4、在项目中建立webpack.config.js文件,配置如下:
const path=require("path");
const SpritesmithPlugin = require('webpack-spritesmith');
module.exports={
// javascript执行入口文件
entry:'./main.js',
//指定输出路径path和输出文件名filename
output:{
filename:'bundle.js',//自定义输出文件名
path:path.resolve(__dirname,'./dist')//自定义输出文件所在目录
},
// mode:'development',
plugins: [
new SpritesmithPlugin({
//设置源icons,即icon的路径,必选项
src: {
cwd: path.resolve(__dirname, 'src/images/icons'),
glob: '*.png'
},
//设置导出的sprite图及对应的样式文件,必选项
target: {
image: path.resolve(__dirname, 'src/images/sprites/sprite.png'),
css: path.resolve(__dirname, 'src/images/sprites/sprite.less') //也可以为css, sass文件,需要先安装相关loader
},
//设置sprite.png的引用格式
apiOptions: {
cssImageRef: './sprite.png' //cssImageRef为必选项
},
//配置spritesmith选项,非必选
spritesmithOptions: {
algorithm: 'top-down'//设置图标的排列方式
}
})
]
};
5、建立src文件夹,在src下再建立如下目录:
将要合成的小图标放到icons文件夹中,sprites文件夹放合成的精灵图。
6、在控制台执行指令:npm i webpack-spritesmith@1.1.0 局部安装webpack-spritesmith插件。
安装成功后,项目中会多出来一个node-modules文件夹
7、安装成功后 执行命令:webpack 进行打包,你会看到sprites文件夹中以合成精灵图。
我的四个小图标合成如下一张图:
8、建立index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="./dist/bundle.js" charset="utf-8"></script>
<div>
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
<div class="icon4"></div>
</div>
</body>
<style>
.icon1,.icon2,.icon3,.icon4{
width: 60px;
height: 60px;
float: left;
background: url(./src/images/sprites/sprite.png);
}
.icon1{
background-position: 0 0px;
}
.icon2{
background-position: 0 -70px;
}
.icon3{
background-position: 0 -140px;
}
.icon4{
background-position: 0 -210px;
}
</style>
</html>
即可实现精灵图使用