# pluto-sprity-webpack-plugin

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

Latest version **0.0.4** (published 2022-07-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install pluto-sprity-webpack-plugin
pnpm add pluto-sprity-webpack-plugin
yarn add pluto-sprity-webpack-plugin
bun add pluto-sprity-webpack-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2022-07-18 |
| First published | 2022-05-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=16.0.0 |
| Dependencies | 6 |
| Unpacked size | 1.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | plutoLam |
| Maintainers | pluto-lam |
| Keywords | webpack, plugin, 精灵图, spritesmith, 前端, 工具, spritesheet-templates, chokidar, glob, webpack-cli |

## Links

- npm: https://www.npmjs.com/package/pluto-sprity-webpack-plugin
- Repository: https://github.com/plutoLam/pluto-sprity-webpack-plugin
- Homepage: https://github.com/plutoLam/pluto-sprity-webpack-plugin#readme
- Issues: https://github.com/plutoLam/pluto-sprity-webpack-plugin/issues
- npm.io page: https://npm.io/package/pluto-sprity-webpack-plugin

## Dependencies (6)

- [glob](https://npm.io/package/glob.md) ^8.0.3
- [mkdirp](https://npm.io/package/mkdirp.md) ^1.0.4
- [chokidar](https://npm.io/package/chokidar.md) ^3.5.3
- [clean-css](https://npm.io/package/clean-css.md) ^5.3.0
- [spritesmith](https://npm.io/package/spritesmith.md) ^3.4.0
- [spritesheet-templates](https://npm.io/package/spritesheet-templates.md) ^10.5.2

## Alternatives

- [unionfs](https://npm.io/package/unionfs.md) — 2.2M weekly downloads
- [path-starts-with](https://npm.io/package/path-starts-with.md) — 35.9K weekly downloads
- [redzip](https://npm.io/package/redzip.md) — 1.2K weekly downloads
- [vscode-anymatch](https://npm.io/package/vscode-anymatch.md) — 848 weekly downloads
- [@ledgerhq/coin-filecoin](https://npm.io/package/@ledgerhq/coin-filecoin.md) — 793 weekly downloads

## Recent versions

- 0.0.4 (latest) — 2022-07-18
- 0.0.3 — 2022-05-19
- 0.0.2 — 2022-05-19
- 0.0.1 — 2022-05-19

## README

# pluto-sprity-webpack-plugin
一个用于生成精灵图的webpack插件

![](https://img.shields.io/badge/author-PlutoLam-f66.svg#crop=0&crop=0&crop=1&crop=1&id=OXVaV&originHeight=20&originWidth=108&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=)
![](https://img.shields.io/badge/version-0.0.4-f66.svg#crop=0&crop=0&crop=1&crop=1&id=Nc47V&originHeight=20&originWidth=90&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=)
![](https://img.shields.io/badge/web-%3E%3D%2095%25-3c9.svg#crop=0&crop=0&crop=1&crop=1&id=LyZIm&originHeight=20&originWidth=90&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=)
![](https://img.shields.io/badge/node-%3E%3D%208.0.0-3c9.svg#crop=0&crop=0&crop=1&crop=1&id=GoxKU&originHeight=20&originWidth=98&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=)
![](https://img.shields.io/badge/test-passing-f90.svg#crop=0&crop=0&crop=1&crop=1&id=b74TK&originHeight=20&originWidth=82&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=)
![](https://img.shields.io/badge/build-passing-f90.svg#crop=0&crop=0&crop=1&crop=1&id=iQz3r&originHeight=20&originWidth=88&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=)
![](https://img.shields.io/badge/coverage-90%25-09f.svg#crop=0&crop=0&crop=1&crop=1&id=h35xX&originHeight=20&originWidth=96&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=)
![](https://img.shields.io/badge/license-MIT-09f.svg#crop=0&crop=0&crop=1&crop=1&id=PxjBJ&originHeight=20&originWidth=78&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=)



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



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



### 安装

yarn

```
 yarn add pluto-sprity-webpack-plugin
```



npm

```
npm i pluto-sprity-webpack-plugin
```



### 使用

```js
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](https://www.npmjs.com/package/glob) |
| cwd（必选）    | 根目录，插件根据根目录匹配文件                               |
| target（可选） | css：最终生成css的文件（会自动生成目录）<br/>img：最终生成精灵图的文件 |




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

---
_Source: https://npm.io/package/pluto-sprity-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._