image-sprite-webpack-plugin weekly downloads statistics

image-sprite-webpack-plugin

A webpack plugin that generates spritesheets from your stylesheets.

Input

• width, height and background properties are mandatory to create a sprite.
• Shorthand properties are recommended.

h1.logo {
    width: 240px;
    height: 80px;
    background: url(./img/logo.png) no-repeat 0 0;
    font-size: 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 */
  font-size: 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;
}

Install

npm install -D image-sprite-webpack-plugin

Example

Production build

const ImageSpritePlugin = require('image-sprite-webpack-plugin');

new ImageSpritePlugin({
    commentOrigin: false,
    compress: true,
    extensions: ['gif', 'png'],
    indent: '',
    log: true,
    //outputPath: './public',
    outputFilename: 'css/sprite-[hash].png',
    padding: 10,
    suffix: '' + Date.now() // do not need to use it with a outputFilename's [hash].
})

git clone this repository
cd examples/webpack4-cssloader-single-chunk
npm i
npm run build

Webpack dev server

const ImageSpritePlugin = require('image-sprite-webpack-plugin');

new ImageSpritePlugin({
    commentOrigin: true,
    compress: false,
    extensions: ['gif', 'png'],
    indent: '  ',
    log: true,
    //outputPath: './public',
    outputFilename: 'css/sprite.png',
    padding: 10,
    suffix: ''
})

git clone this repository
cd examples/webpack4-cssloader-single-chunk
npm i
npm start

More Examples

• webpack4 + css-loader (Supports Hot Module Reload)
• webpack4 + css-loader + extract-text4.x(beta) + single chunk (Works, but not recommended.)
• webpack4 + css-loader + mini-css-extract + multiple chunks (with webpack4, this option is recommended.)
• webpack4 + css-loader + mini-css-extract + multiple chunks + svg (svgs are not supported yet.)

NPM Commands in Examples

Each example has the following command.

• Creates a production build.

  npm run build
  

• Starts webpack-dev-server

  npm start
  

• Creates a production build with node inspector. (with chrome://inspect/#devices)

  npm run build-debug
  

• Starts webpack-dev-server with node inspector. (with chrome://inspect/#devices)

  npm run start-debug
  

Dependency

• This plugin requires css-loader to handle CssModule.
• It is also recommended that you use a file-loader to automatically move and access image resource files.

Compatibility

• Tested with webpack4
• Works fine with mini-css-extract-plugin on webpack4 (See example)
• Works with extract-text-webpack-plugin
  • Works with webpack4 + extract-text-webpack-plugin 4.x
• As you would know, extract-text-webpack-plugin and mini-css-extract-plugin do not support HMR not yet. So using with these plugins is recommended on a production env.

Options

Name	Type	Default	Description
commentOrigin	{Boolean}	false	Shows the original image resource url with a comment.
compress	{Boolean}	false	Compress the output css
extensions	{Array}	['png', 'jpg', 'jpeg', 'gif']	File extensions to be converted with the spritesheets
indent	{String}	' ' (2 spaces)	The indentation for css output source
log	{Boolean}	true	Enable/disable message logging
outputPath	{String}	webpack config's outputPath	Describes spritesheets file's output path
outputFilename	{String}	'/sprite/sprite-[hash].png'	A sprite image filename
padding	{Number}	0	Padding to use between images
suffix	{String}	''	A suffix for outputFilename

Bug Report

If you find a bug, please report to us posting issues on GitHub.

License

image-sprite-webpack-plugin is released under the MIT license.

Copyright (c) 2018 NAVER Corp.…