webpack合成sprite图

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')
                }
            }
        }
    })
]