pluto-sprity-webpack-plugin

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

开发过程已发布到掘金：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