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