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

为了性能优化, 我们一般采用精灵图的方式来处理图标, 这里我们采用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]
  }
}

引入