vue-cli3使用webpack-spritesmith配置雪碧图

一、背景问题

项目中如果有大量的小图标，如果不使用阿里的iconfont。UI给一个加一个，加一个引用一个，每个图标虽然很小，但是也是一次请求，每次请求都是消耗性能资源的.

二、解决思路

使用webpack-spritesmith可以将所有的icon小图标整合成一张图片。每次都只会请求一次，同时还能自动生成定位样式，对于都是同尺寸的小图标，直接可以使用。

三、废话少说，直接来code

1、我是使用vue-cli3配置这个webapck的插件的。如果使用cli2的网上也很多，自行查找

2、查阅资料：(npm官网 github的readme)

（1）https://www.npmjs.com/package/webpack-spritesmith

（2）https://github.com/mixtur/webpack-spritesmith

3、来来。配置走起。

（1）假装你的vue-cli3脚手架已经搭建起来了，在项目根目录，新建一个vue.config.js的文件（webpack就是在这里配置。cli3不建议修改webapck,但是如果需要修改，在这里可以覆盖默认的配置）

（2）npm install webpack-spritesmith --save

（3）在vue.config.js里面写东西啊

const path = require('path')  //引入node模块，一会要操作文件，输入，生成，输出都需要这玩意。
const SpritesmithPlugin = require('webpack-spritesmith'); // 主角，必须引入。要不然咋用


/* 这里是我们自己修改的模板样式，webpack，会自动生成一个sprite.css的样式，有时候生成的不满意，
我们可以在这里修改，可以自己打印一下 data里面的参数，看着就会大概明白（先看下面的配置，最后看这个模板）
*/
var templateFunction = function (data) {
  var shared = '.icon { background-image: url(I);background-size: Wpx Hpx;}'.replace('I', data.sprites[0].image).replace('W', data.spritesheet.width)
    .replace('H', data.spritesheet.height)

  var perSprite = data.sprites.map(function (sprite) {
    return '.icon-N {  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('
');

  return shared + '
' + perSprite;
};



// 所有的配置都在这个导出里面
module.exports = {
// webpack的配置入口可以打印这个config。可以看到webpack的配置项
  configureWebpack: config => {
    /*
    细节坑。文档里面写着 需要resolve，引入图片生成的位置，
    不加这行会报错。因为github，Readme里面有这句话
    resolve contains location of where generated image is
    （要把生成的地址resolve到modules里面。不写就错）
    一定要加，血的教训啊
    */
     config.resolve.modules = ['node_modules', './src/assets/images'] 
    // 定义一个插件数组。用来覆盖，在里面使用我们的主角
    const Plugins = [
      new SpritesmithPlugin({
        /*
        目标小图标，这里就是你需要整合的小图片的老巢。
        现在是一个个的散兵，把他们位置找到，合成一个
        */
        src: {
          cwd: path.resolve(__dirname, './src/assets/icon'),
          glob: '*.png'
        },
        // 输出雪碧图文件及样式文件，这个是打包后，自动生成的雪碧图和样式，自己配置想生成去哪里就去哪里
        target: {
          image: path.resolve(__dirname, './src/assets/images/sprite.png'),
          css: [
            [path.resolve(__dirname, './src/assets/css/sprite.scss'), {
              // 引用自己的模板
              format: 'function_based_template'
            }],
          ]
        },
        // 自定义模板入口，我们需要基本的修改webapck生成的样式，上面的大函数就是我们修改的模板
        customTemplates: {
          'function_based_template': templateFunction,
        },
        // 样式文件中调用雪碧图地址写法（Readme这么写的）
        apiOptions: {
          cssImageRef: '~sprite.png'
        },
        // 让合成的每个图片有一定的距离，否则就会紧挨着，不好使用
        spritesmithOptions: {
          padding: 20
        }
      })
    ]
    // config里面，覆盖掉以前的，要不然不好使
    config.plugins = [...config.plugins, ...Plugins]
  }
}

四、组件里面怎么使用

1.根据你的配置。重新npm run serve以后。会在你配置的文件 里面生成合成图sprite.png 和 sprite.css(或者其他格式)

2.在sprite.css里面已经通过webpack的机制，引入了sprite.png,所以组件里面直接在style部分直接@import'../xx/sprite/.css'就可以了

3.根据模板的要求，我们在html使用

<span class="icon icon-每个小图的名字"></sapn>

五、几个问题

1.css模板配置（就是最上面的大函数），webapck自己官方代码 全是最基础的。没有background-size的设置，这样生成的图大小是没有规定尺寸的。所以引用显示会很有问题 。所以我在后边加了replace('W', data.spritesheet.width) .replace('H', data.spritesheet.height)

var templateFunction = function (data) {
  var shared = '.icon { background-image: url(I);background-size: Wpx Hpx;}'.replace('I', data.sprites[0].image)
  .replace('W', data.spritesheet.width)
  .replace('H', data.spritesheet.height)

这样这个合成的大图尺寸就固定了，小图定位就很准确， 里面所有不清楚的参数，打印data，看一下就明白了

2.这句代码。在cli2 里面很好找，cli3里面因为我对webpack的把不熟悉，打印了config才找到，才加上。找不到的配置，就打印config，

config.resolve.modules = ['node_modules', './src/assets/images'] 

3.在组建里面使用，前两个是固定写法，否则不生效，最后可以继续定义样式名，修改样式

<span class="icon icon-小图名字  自定义名字"></span>