0.0.1 • Published 1 year ago

@daumoe/sprite-png-plugin v0.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

Sprite PNG plugin

Webpack plugin helps to create PNG sprite image and coordinate mapping file (manifest.json)

Usage:

Suppose you want a manifest.json file in src/asset/manifest.json. You can import it into any place without creating it, plugin will handle that

import React from "react";
...
import * as mappingData from "src/asset/manifest.json"; // no need to create this file. Just remember the path

return (
  <YourComponent>
)

webpack.config.js

const SpritePNG = require("sprite-png-plugin");
...
const spriter = new SpritePNG({
  manifestFileName: "src/asset/manifest.json" // Path to generate manifest file
});

...
module.exports = {
  ...,
  module: {
    ...,
    rules: [
      ...,
      {
        test: /\.png$/,
        type: 'asset/resource'
      },
      ...
    ],
    plugins: [
      ...,
      spriter,
      ...
    ],
    ...
  }
}

Options:

OptionTypeRequiredDefaultDescription
outputPathstringNoWebpack output pathYour output build path. Default will get from webpack output
includesRegExp | ArrayNoundefinedReg to filter the images for sprite
manifestFileNamestringNomanifest.jsonCoordinate file name (path name is accepted)

Inspiration by: