@daumoe/sprite-png-plugin v0.0.1

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:

Inspiration by:

• image-sprite-webpack-plugin
• webpack-virtual-modules