webpack插件 webpack-spritesmith来自动合成精灵图.

谁借莪１个温暖的怀抱￠ 2022-10-19 15:59 144阅读 0赞

## 为了性能优化, 我们一般采用精灵图的方式来处理图标, 这里我们采用webpack插件 webpack-spritesmith来自动合成精灵图. ##

## 安装 ##

npm install webpack-spritesmith -S

## Vue.config.js ##

/* * @Author: zhang gen yuan * @Date: 2021-04-13 14:54:44 * @Descripttion: */
    // vue.config.js
    var path = require('path');
    var SpritesmithPlugin = require('webpack-spritesmith');
    var templateFunction = function (data) { 
      var shared = '.zgy { background-image: url(I) }'
          .replace('I', data.sprites[0].image);
      var perSprite = data.sprites.map(function (sprite) { 
          return '.zgy-N { width: Wpx; height: Hpx; background-position: Xpx Ypx; }'
              .replace('N', sprite.name)
              .replace('W', sprite.width)
              .replace('H', sprite.height)
              .replace('X', sprite.offset_x)
              .replace('Y', sprite.offset_y);
      }).join('\n');
    
      return shared + '\n' + perSprite;
    };
    module.exports = { 
      configureWebpack: config => { 
        config.resolve.modules = ["node_modules", "spritesmith-generated"]
        let plugins = [
          new SpritesmithPlugin({ 
            src: { 
                cwd: path.resolve(__dirname, 'src/assets/icon'),
                glob: '*.png'
            },
            target: { 
                image: path.resolve(__dirname, 'src/spritesmith-generated/sprite.png'),
                css: [
                  [path.resolve(__dirname, 'src/spritesmith-generated/sprite.scss'), { 
                    format: 'handlebars_based_template'
                  }]
                ]
            },
            customTemplates: { 
              'handlebars_based_template': templateFunction,
            },
            apiOptions: { 
                cssImageRef: "~sprite.png"
            }
          })
        ]
        config.plugins = [...config.plugins, ...plugins]
      }
    }

## 引入 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Byb2dyYW1tZXJ3aGl0ZQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Byb2dyYW1tZXJ3aGl0ZQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Byb2dyYW1tZXJ3aGl0ZQ_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Byb2dyYW1tZXJ3aGl0ZQ_size_16_color_FFFFFF_t_70]: /images/20221004/2cb11646bf5b4b46b46e1e217b667d51.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Byb2dyYW1tZXJ3aGl0ZQ_size_16_color_FFFFFF_t_70 1]: /images/20221004/807b8bc0e0844f0ca6814d6ad7a5c842.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Byb2dyYW1tZXJ3aGl0ZQ_size_16_color_FFFFFF_t_70 2]: /images/20221004/82e11d213c5148ada21be950bd098e04.png