webpack雪碧图实现（webpack管理小图标素材）

雪碧图也叫CSS精灵， 是一CSS图像合成技术，这里介绍webpack实现雪碧图

//新手建议先看上一篇文章，结合实例容易理解；
//webpack+vue+vueRouter模块化构建完整项目实例超详细步骤（附截图、代码、入门篇）

这是我的文件目录：

// 在上个实例项目上增加了icons文件夹；

// dist/sprites/目录是后面执行webpack打包命令自动生成的，先不用管；

1、安装webpack-spritesmith；

npm install --save-dev webpack-spritesmith

2、webpack.config.js添加如下代码：

var SpritesmithPlugin = require('webpack-spritesmith');

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

3、执行webpack打包指令,执行后打包生成dist/sprites/文件(或者上一篇文章写的npm run build指令)

webpack

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

<link rel="stylesheet" type="text/css" href="./dist/sprites/sprite.css" />

5、App.vue中通过class引用小图标，如：（具体图标class进入sprite.css查看）

i标签是行内元素，可以添加css为i.icon{display:inline-block}

6、执行命令webpack-dev-server，生产链接浏览器打开（或者上一篇文章写的npm run dev）

webpack-dev-server

ok,效果如下：