webpack-spritesmith 精灵图合成及使用

最新推荐文章于 2023-05-24 16:31:07 发布

小码农码代码

最新推荐文章于 2023-05-24 16:31:07 发布

阅读量1.1k

点赞数 1

文章标签： webpack npm

本文链接：https://blog.csdn.net/qq_44770878/article/details/125052152

版权

前言:因为要使用精灵图，所以学习一下，顺便记录了过程。

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>

即可实现精灵图使用

小码农码代码

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
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=r...
复制链接

扫一扫