webpack-spritesmith 精灵图合成和使用
前言:因为要使用精灵图 ,所以学习一下,顺便记录了过程。
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文件
-
-
<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>
即可实现精灵图使用
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgffjhj
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01