css3加雪碧图,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