webpack雪碧圖實現（webpack管理小圖標素材）

一、安裝webpack-spritesmith；

npm install --save-dev webpack-spritesmith

二、webpack.config.js的module.exports = {//代碼}添加以下代碼：

plugins: [
        new SpritesmithPlugin({
            // 目標小圖標
            src: {
                cwd: path.resolve(__dirname, './src/assets/imgs/icons'),
                glob: '*.png'
            },
            // 輸出雪碧圖文件及樣式文件
            target: {
                image: path.resolve(__dirname, './dist/sprites/sprite.png'),
                css: path.resolve(__dirname, './dist/sprites/sprite.css')
            },
            // 樣式文件中調用雪碧圖地址寫法
            apiOptions: {
                cssImageRef: '../sprites/sprite.png'
            },
            spritesmithOptions: {
                algorithm: 'top-down'
            }
        })
    ]

三、執行webpack打包指令,執行後打包生成dist/sprites/文件(或者上一篇文章寫的npm run build指令)

webpack

四、index.html文件中引入sprite.css，如：

<link rel="stylesheet" type="text/css" href="https://segmentfault.com/a/dist/sprites/sprite.css" />

 

轉自 http://www.07net01.com/2017/03/1825651.html