前端工程化之使用 webpack-spritesmith 自动合成精灵图

女爷i 2022-10-19 12:53 303阅读 0赞

点击上方 程序员成长指北，关注公众号

回复1，加入高级Node交流群

![793b0b1aaf9b02bf34e1b51fc55a15d6.png][]

# 来源：hetia\_az    #

https://juejin.cn/post/6960939405209141261

# 前言 #

一般来说, 平时我们使用图标是一张一张来用, 请求图标的时候也是一张张返回, 如下:

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

## 起步 ##

从零开始, 我们先创建个vue项目, 这里使用vue-cli3, 下面是创建好的项目:

![d66e41f5aba854ecb36a81cffe022f71.png][] image.png

## 安装插件 ##

npm i webpack-spritesmith
    复制代码

## 使用 ##

因为是vue-cli3, 所以为了配置webpack, 我们得在根目录创建一个配置文件vue.config.js 然后在该文件引入使用该插件, 在此之前, 我们打开官方文档看看 `https://www.npmjs.com/package/webpack-spritesmith`

![c4d518248e9046962188bcda3b366ddf.png][] image.png

按照它的来(官方文档按照webpack的配置写法, 与vue-cli3用些许差异):

// vue.config.js
    var path = require('path');
    var SpritesmithPlugin = require('webpack-spritesmith');
    var templateFunction = function (data) {
      var shared = '.ico { background-image: url(I) }'
          .replace('I', data.sprites[0].image);
      var perSprite = data.sprites.map(function (sprite) {
          return '.ico-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]
      }
    }
    复制代码

到这里基本就算完成了, 然后我们来使用一下 运行项目

yarn serve
    复制代码

![d09fca268580615da8b00f8e5a14dba1.png][] image.png

发现生成了一个文件夹, 点开可以看到精灵图已经合成了, 在组件内使用:

![9023ca7fac6d0fbc50e094985ee2e1f4.png][] image.png

![519c01ce49380ba03eee738f005ec615.png][]看到是使用精灵图了

## 打包 ##

然后再打包看看

yarn build
    复制代码

![2ee67906983da277a28971f04d0d62f7.png][]

The End

**如果觉得这篇文章还不错**

**点击下面卡片关注我**

**来个【分享、点赞、在看】三连支持一下吧![4482250f47f9b67733eddfba7cf253da.png][]**

![698b8a43c1be573125eff497b93348c6.png][]

**“分享、点赞、在看” 支持一波** ![187ffa03d45b8e708499d8f430c5dd68.png][]

[793b0b1aaf9b02bf34e1b51fc55a15d6.png]: /images/20221004/a88d2af855704f4a9abd5311cbf19c3b.png
[ac5bf848e34ae70a46c521a483df879b.png]: /images/20221004/5a1f1eda82284e1eb5915116f15e14b4.png
[d66e41f5aba854ecb36a81cffe022f71.png]: /images/20221004/cbbf6eebc76f4f7187853d6cf187b505.png
[c4d518248e9046962188bcda3b366ddf.png]: /images/20221004/aac9ea30ce77471581acc15f8e662334.png
[d09fca268580615da8b00f8e5a14dba1.png]: /images/20221004/b33fa63f846c4c9cbee287193b056fc6.png
[9023ca7fac6d0fbc50e094985ee2e1f4.png]: /images/20221004/653997f4108e43f280e008b88d73f86f.png
[519c01ce49380ba03eee738f005ec615.png]: /images/20221004/5dc45df8ef464f02911bbf5639254df3.png
[2ee67906983da277a28971f04d0d62f7.png]: /images/20221004/b3c42727b7fb4fed9ae369871905a1a3.png
[4482250f47f9b67733eddfba7cf253da.png]: /images/20221004/9ff671ecf72844c48321c7aebc852e89.png
[698b8a43c1be573125eff497b93348c6.png]: /images/20221004/aad616c0e07747ef9bc54638afe2f799.png
[187ffa03d45b8e708499d8f430c5dd68.png]: /images/20221004/1c32af745f6b417681381240642f8c30.png