webpack-spritesmith 精灵图合成和使用

小码农码代码

2024-04-25 帮助1人

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

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文件

即可实现精灵图使用

学新通

这篇好文章是转载于：学新通技术网

photoshop保存的图片太大微信发不了怎么办