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 { 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 = { // 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>

转载于:https://www.cnblogs.com/guangixn/p/10682131.html