sprites-loader v0.8.2

npm install --save-dev sprites-loader

file.css

  .image {
    background-image: url("./assets/images/example.png?__sprite");
}

file.js

import css from 'file.css';

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader', 'sprites-loader', 'less-loader' ]
      }
    ]
  }
}

you can set css property width and height, the sprite's background-size will be set according to the css property width and height, the first value of background-size property is (width/imageWidth) * spriteWidth, the second value of background-size property calculate as same the the second value. if you not set width and height, the element will set width and height to image's width and height.

Here's an example how to use sprites-loader css code

div {
    background-image: url('./img/love.png?__sprite')
}

p {
    margin: 0;
    width: 32px;
    height: 32px;
    background: no-repeat url('./img/love-heart.png?__sprite');
}

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader', 'sprites-loader', 'less-loader' ]
      }
    ]
  }
}

output

div {
  background-image: url("img/sprite-6c7333.png");background-size:400px 200px;
background-position:-0px -0px;
width:200px;
height:200px;
 }

a {
  margin: 0;
  width: 32px;
  height: 32px;
  background: no-repeat url("img/sprite-6c7333.png");background-size:64px 32px;
background-position:-32px -0px;
 }