webpack实现css_sprite（雪碧图）

1.我的文件目录：

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

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

1、安装webpack-spritesmith；

npm install --save-dev webpack-spritesmith

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

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

  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/文件      cnpm run build

  我执行的时候，提示：找不到这个模板，如果你也报这个错，安装下就行

    cnpm install globule --save-dev       

4.在main.js中引入    import './assets/sprites/sprite.css'

5.vue页面中用这些图标代码：----样式代码已经自动生成

6.运行项目：cnpm run dev