Add image-sprite-webpack-plugin

[hwshim]

image-sprite-webpack-plugin generates bitmap-image based spritesheets from your stylesheets.

Input

h1.logo {
    width: 240px;
    height: 80px;
    background: url(./img/logo.png) no-repeat 0 0;
}

span.itemPicture {
    display: inline-block;
    background-image: url(./img/item-picture.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 36px;
    height: 36px;
}

Output

h1.logo {
  width: 240px;
  height: 80px;
  background: url(/css/sprite.png) no-repeat 0 -20px;
  /* background: url(/img/logo.png) no-repeat 0 0 */
}

span.itemPicture {
  display: inline-block;
  background-image: url(/css/sprite.png);
  /* background-image: url(/img/item-picture.png) */
  background-repeat: no-repeat;
  background-position: -100px -90px;
  /* background-position: 0 0 */
  width: 36px;
  height: 36px;
}

Features

• Simple and easy to use.
• Supports bitmap images (png, jpg, gif, but not svg)
• Provides comments contains original image url to help with debugging.
• Supports Hot Module Reload.
• Supports webpack 2.x ~ 4.x. (see examples)
• Works fine along with cooperative plugins (mini-css-extract, extract-text-webpack).
• Requires css-loader to handle CssModule.

[alexander-akait]

@hwshim please rebase

[hwshim]

@evilebottnawi

Rebase complete. Thank you.

[alexander-akait]

need tests in source repo, thanks