Sample code for how to use Sprite in webpack

1. What is Sprite Picture?

CSS Sprite is CSS Sprite, which is also called CSS sprite. It is a CSS image merging technology. The method is to merge small icons and background images onto a picture, and then use the background positioning of css to display the image part that needs to be displayed.

2: Why use Sprite Pictures

Based on the needs of our company, because there are many components, each component has about 50 pictures, and each picture is a request, that is, more than 300 requests are sent, which is very scary. Therefore, in order to optimize performance and reduce http requests, it was decided to adopt the form of Sprite.

Sprite Pictures is to organize many of the pictures you want into one picture, and then use background-* to identify and locate pictures to achieve the previous effect.

Three: How to use Sprite Pictures

There were many ways to use Sprite Pictures, such as PS, and the best solution now iswebpack-spritesmith。

I don't actually know much about webpack. I'm now listing the usage methods and the problems I've encountered when using webpack.

1. Installation

Execute the command line:npm install --save-dev webpack-spritesmith

2. Write in

 var path = require('path')

 var SpritesmithPlugin = require('webpack-spritesmith')

 //Custom style var templateFunction = function (data) {
  var shared = '.ico { background-size: TWpx THpx }'
    .replace('TW', [0].total_width / 2)
    .replace('TH', [0].total_height / 2)

  var perSprite = (function (sprite) {
    return '&amp;.element-N {\n width: Wpx;\n height: Hpx;\n background-position: Xpx Ypx;\n}'
      .replace('N', )
      .replace('W',  / 2)
      .replace('H',  / 2)
      .replace('X', sprite.offset_x / 2)
      .replace('Y', sprite.offset_y / 2)
      .replace('TW', sprite.total_width / 2)
      .replace('TH', sprite.total_height / 2)
  }).join('\n')

  return shared + '\n' + perSprite
 }

  = {
   ...
   module: {
     rules: [
       {test: /\.styl$/, use: [
         'style-loader',
         'css-loader',
         'stylus-loader'
       ]},
       {test: /\.png$/, use: [
         'file-loader?name=i/[hash].[ext]'
       ]}
     ]
   },
   resolve: {
     modules: ['node_modules', 'spritesmith-generated']
   },
   plugins: [
     new SpritesmithPlugin({
       src: { //Introduce path         cwd: (__dirname, 'src/images/ios/'),
         glob: '*.png'
       },
       target: { //Output path         image: (__dirname, 'src/spritesmith-generated/'),
         css: [
          [(__dirname, 'src/spritesmith-generated/'), {
            format: 'function_based_template'
          }],
          [(__dirname, 'src/spritesmith-generated/'), {
            format: 'handlebars_based_template'
          }]
         ]
       },
       customTemplates: {
        'function_based_template': templateFunction, //What kind of css style should be customized to output       },
       apiOptions: {
         cssImageRef: ''
       }
     })
   ]
 }

3. Execute the command after changing the address

wbpack

In fact, this has met most of the needs. You can change the input and output addresses you are in according to your needs. You can set the css (style-components, styl, etc.) you want to set, and then copy it directly to your project css file, which is very flexible.

Four: Points to be noted

Sometimes I specify pictures under different files to synthesize a Sprite picture. What should I do?

For example, my requirements are:

resources
- ios
  - images
- ant
  - images
- ios
  - images
...

Translation: There are several folders (ios, ant, ios) under resources, corresponding to the images folder below, each with its corresponding pictures.

It needs to be noted that it supports glob

src: { 
 //Introduce path cwd: (__dirname, 'src/images/ios/'),
 glob: '*.png' //Change here},

Here you can refer to the settings according to your needs:/

Change glob to

@(wechat|element|ios)/images/*.png

Effect

Five: Deeper requirements

I actually want to generate Sprite pictures and css in their respective folders in the pictures. How to implement them? I have written a part of them, but I haven't finished it yet. I feel that I have encountered technical difficulties. I presented the code and will continue to optimize it to implement it.

var path = require('path')
var SpritesmithPlugin = require('webpack-spritesmith')

var platforms = ['android', 'ant', 'element', 'ios', 'wechat']//, 'windows']

// var url = 'ant'
const TARGET = 

({ TARGET })

 = [TARGET].map(l => {
 (l)
 const url = l

 const fn = (data) => {
  (url)
  var shared = 'background-size: TWpx THpx\n'
    .replace('TW', [0].total_width / 2)
    .replace('TH', [0].total_height / 2)

  var perSprite = (function (sprite) {
    return `&.${url}-N {\n width: Wpx;\n height: Hpx;\n background-position: Xpx Ypx;\n}\n`
      .replace('N', )
      .replace('W',  / 2)
      .replace('H',  / 2)
      .replace('X', sprite.offset_x / 2)
      .replace('Y', sprite.offset_y / 2)
      .replace('TW', sprite.total_width / 2)
      .replace('TH', sprite.total_height / 2)
  }).join('\n')

  return shared + '\n' + perSprite
 }

 return {
  module: {
    rules: [
      {test: /\.styl$/, use: [
        'style-loader',
        'css-loader',
        'stylus-loader'
      ]},
      {test: /\.png$/, use: [
        'file-loader?name=i/[hash].[ext]'
      ]}
    ]
  },
  entry: {
   [url]: (__dirname, url),
  },
  output: {
   path: (__dirname, '../parsed/', url),
   filename: '[name].css'
  },
  resolve: {
    modules: ['node_modules', 'spritesmith-generated']
  },
  plugins: [
    new SpritesmithPlugin({
      src: {
        cwd: (__dirname, 'images/'+url+'/'),
        glob: '*.png' // '@(android|ant|element|ios|wechat|windows)/*.png'
      },
      target: {
        image: (__dirname, '../parsed/'+url+'/'+url+'.png'),
        css: [
          [(__dirname, '../parsed/'+url+'/'+url+'.css'), {
            format: 'function_based_template'
          }]
        ]
      },
      customTemplates: {
        'function_based_template': fn
      }
    })
  ]
 }
})

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.