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