webpack合成sprite图

Sprite图（雪碧图），将项目中需要用到的icon合并到一张图以减少图片资源的请求次数。

今天终于中webpack成功生成雪碧图～

1. npm install webpack-spritesmith --save-dev

2. 在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 '//设置图标的排列方式

}

})

]

3. 再执行webpack打包一下你的项目，就会在对应路径下生成sprite.png和sprite.less文件，生成的样式文件中会有注释告诉你如何使用

可参照github地址：https://github.com/mixtur/webpack-spritesmith