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

• Make sure ImageMagick is installed on your device and add it to PATH. Because Spritesmith works on top of it
• Make sure your assets is actual png image. You can use online converter tool (JPG -> PNG, JPEG -> PNG, SVG -> PNG, ...). And DO NOT change file extension directly (I do it and got error Invalid signature)
• The manifest path should be relative path from current webpack config container directory
• Manifest file will be generated automatically. You must remember exactly where it is. Help you a lot to import it into code base

{
  "width": <number>,
  "height": <number>,
  "frames": {
    [image_1_name]: {
      "width": <number>,
      "height": <number>,
      "x": <number>
      "y": <number>
    },
    [image_2_name]: {
      ...so_on
    },
    ...
  }
}

• width: sprite sheet width
• height: sprite sheet height
• frames: contain each images coordinate (x, y, w, h)

Folder structure

├── code_base/
│   └── src/
│       ├── index.js
│       └── assets/
│           ├── image_1.png
│           ├── image_2.png
│           └── ...
└── webpack.config.js

main.js

import React from "react";
...
import * as mappingData from "./assets/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/assets/manifest.json" // Path to generate manifest file
});

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

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