webpack使用雪碧图插件

1.先安装插件

npm install --save-dev webpack-spritesmith

2.配置webpack

配置之前 先引入var SpritesmithPlugin = require('webpack-spritesmith');

在webpack.config.js的插件里面写（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.打包 npm run build  然后你就会看到生成的png和css

 

4.页面上引入你生成的css就行了
vue中单页面直接在style里面引入就行了，然后直接用
eg：<i class="icon-u2360"></i>

转载于:https://www.cnblogs.com/myfirstboke/p/8743966.html