0.0.4 • Published 2 years ago

pluto-sprity-webpack-plugin v0.0.4

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

pluto-sprity-webpack-plugin

一个用于生成精灵图的webpack插件

npm.io npm.io npm.io npm.io npm.io npm.io npm.io npm.io

开发过程已发布到掘金:https://juejin.cn/post/7106283722697080839

该插件会将指定目录下的图片合并成一张精灵图,并生成匹配精灵图的css文件,使用时直接使用css类名即可

安装

yarn

 yarn add pluto-sprity-webpack-plugin

npm

npm i pluto-sprity-webpack-plugin

使用

const path = require("path");
const plutoSprityPlugin = require("pluto-sprity-webpack-plugin");

module.exports = {
	...
	plugins: [
		new plutoSprityPlugin(
			{
				glob: "assets/img/sprite/*.png",
				cwd: path.resolve(__dirname, "src"),
				target: {
					css: "assets/css/sprite.css",
					img: "assets/img/sprite.png"
				}
			})
	]
};

配置:

参数配置
glob(必选)使用glob规则匹配文件,详情见glob
cwd(必选)根目录,插件根据根目录匹配文件
target(可选)css:最终生成css的文件(会自动生成目录)img:最终生成精灵图的文件

target可以省略,默认的css路径为assets/css/sprite.css ,默认的img路径为assets/img/sprite.png