Neat! Pickled Muskrat!

    pluto-sprity-webpack-plugin

    0.0.4 • Public • Published

    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

    Install

    npm i pluto-sprity-webpack-plugin

    DownloadsWeekly Downloads

    75

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    1.47 MB

    Total Files

    15

    Last publish

    Collaborators

    • pluto-lam