Sprite图(雪碧图),将项目中需要用到的icon合并到一张图以减少图片资源的请求次数。
npm install webpack-spritesmith –save-dev
在webpack.config.js中
const SpritesmithPlugin = require('webpack-spritesmith')
plugins: [
new SpritesmithPlugin({
//设置源icons,即icon的路径,必选项
src: {
cwd: path.resolve(__dirname, 'src/images/icons'),
glob: '*.png'
},
//设置导出的sprite图及对应的样式文件,必选项
target: {
image: path.resolve(__dirname, 'src/images/sprites/sprite.png'),
css: path.resolve(__dirname, 'src/images/sprites/sprite.less') //也可以为css, sass文件,需要先安装相关loader
},
//设置sprite.png的引用格式
apiOptions: {
cssImageRef: './sprite.png' //cssImageRef为必选项
},
//配置spritesmith选项,非必选
spritesmithOptions: {
algorithm: 'top-down'//设置图标的排列方式
}
})
]
- 再执行webpack打包一下你的项目,就会在对应路径下生成sprite.png和sprite.less文件,生成的样式文件中会有注释告诉你如何使用
项目中实例
- 图片放在src/assets/images/icon目录
- spirit 生成在 src/assets/images
icon.less 如下:
.icon { background-image: url("../images/sprite.png"); }
.icon-color-all { display: inline-block; width: 40px; height: 20px; background-position: 0px 0px; vertical-align: top; }
plugin: [
new SpritesmithPlugin({
src: {
cwd: path.resolve(__dirname, '../src/assets/images/icon'),
glob: 'icon-*.png'
},
target: {
image: path.resolve(__dirname, '../src/assets/images/sprite.png'),
css: [
[path.resolve(__dirname, '../src/assets/less/icon.less'),{format:'handlebars_based_template'}]
]
},
apiOptions: {
cssImageRef: "../images/sprite.png"
},
// 指用户自定义 css 模板
官方参考模板是:/node_modules/spritesheet-templates/lib/templates/css.template.handlebars
customTemplates: {
handlebars_based_template: function (data) {
if (data.sprites.length) {
return [ `.icon { background-image: url("${data.sprites[0].image}"); }` ].concat(data.sprites.map(
p =>
`.${p.name} { display: inline-block; width: ${p.width}px; height: ${p.height}px; background-position: ${p.offset_x}px ${p.offset_y}px; vertical-align: top; }` )).join('\r\n')
}
}
}
})
]