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: px; height: px; background-position: px px; 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')
                }
            }
        }
    })
]