1.先安装插件

  1. npm install --save-dev webpack-spritesmith

2.配置webpack

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

在webpack.config.js的插件里面写(plugins)

  1. new SpritesmithPlugin({
  2. // 目标小图标,这里就是你要生成的图片的目录
  3. src: {
  4. cwd: path.resolve(__dirname, './src/assets/imgs/icons'),
  5. glob: '*.png'
  6. },
  7. // 输出雪碧图文件及样式文件,这个是打包后,自动生成的雪碧图和样式,自己配置想生成去哪里就去哪里
  8. target: {
  9. image: path.resolve(__dirname, './dist/sprites/sprite.png'),
  10. css: path.resolve(__dirname, './dist/sprites/sprite.css')
  11. },
  12. // 样式文件中调用雪碧图地址写法
  13. apiOptions: {
  14. cssImageRef: '../sprites/sprite.png'
  15. },
  16. spritesmithOptions: {
  17. algorithm: 'top-down'
  18. }
  19. })
    3.打包 npm run build 然后你就会看到生成的pngcss

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

webpack使用雪碧图插件的更多相关文章

  1. Vue-cli3.0下的雪碧图插件webpack-spritesmith配置方法

    在前端项目中,为了减少对图片的请求次数,一般而言需要进行雪碧图的配置.即将多张小图标合并成一张图片,这样页面中的小图标都在一张图片上,只需请求一张图片,就可以通过CSS设置各个小图标的显示,利于节省带 ...

  2. 用FSM一键制作逐帧动画雪碧图 Vue2 + webpack

    因为工作需要要将五六十张逐帧图拼成雪碧图,网上想找到一件制作工具半天没有找到,就自己用canvas写了一个. 写成之后就再没有什么机会使用了,因此希望有人使用的时候如果遇到bug了能及时反馈给我. 最 ...

  3. Vue-cli在webpack内使用雪碧图(响应式)

    先执行install cnpm install webpack-spritesmith 文件位置 build\webpack.dev.conf.js 添加内容: const SpritesmithPl ...

  4. 快速获取雪碧图的图标样式插件 - gulp-css-spriter教程

    如何快速把合成好的雪碧图,快速获取图标的样式呢? 用gulp-css-spriter很简单. 第一步: 在某个文件夹用shitf+鼠标右键 第二步: npm install gulp-css-spri ...

  5. gulp将多张小图自动合成雪碧图

    最近一直在做移动端的改版项目,做之前老大就跟我说了好几次,说这次改版一定要用雪碧图减少一个页面的图片的请求次数,能加快页面的加载速度就一定要加快,我说可以.因为之前的项目开发时间过短,也没有时间去慢慢 ...

  6. vue-cli3使用webpack-spritesmith配置雪碧图

    一.背景问题 项目中如果有大量的小图标,如果不使用阿里的iconfont.UI给一个加一个,加一个引用一个,每个图标虽然很小,但是也是一次请求,每次请求都是消耗性能资源的. 二.解决思路 使用webp ...

  7. vue-cli3 使用雪碧图

    //vue.config.js const path = require("path"); const SpritesmithPlugin = require("webp ...

  8. 图标字体 VS 雪碧图——图标字体应用实践

    本文介绍使用图标字体和SVG取代雪碧图的方法.雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊.无法动态变化如hover时候反色.而使用图标字体可以完美解决上述问题,同时具备兼容性好,生 ...

  9. gulp 制作雪碧图

    雪碧图:sprite 是把多张图片拼到一张图中,提升性能的一种做法.把合并的图片一次性加载到内存中,需要时只渲染一部分. 我们选择gulp.spritesmith插件. 使用gulp时首先要在指定的任 ...

随机推荐

  1. Maven、SpringBoot框架结构优化

    一.创建maven项目,名为test-parent,pom文件如下: ... <artifactId>test-parent</artifactId> <version& ...

  2. .NET Core开发日志——RequestDelegate

    本文主要是对.NET Core开发日志--Middleware的补遗,但是会从看起来平平无奇的RequestDelegate开始叙述,所以以其作为标题,也是合情合理. RequestDelegate是 ...

  3. 实际体验 .NET Standard 2.0 的魅力

    在我们的 .net core 大迁移工程中,有些项目完成了迁移,有些还未迁移,这就带来了一个烦恼——我们自己开发的公用类库如何在 .net core 与 .net framework 项目中共享?如果 ...

  4. 524 (Div. 2) Masha and two friends

    Codeforces Round #524 (Div. 2) C. Masha and two friends 题目链接 题意:较为简单,初始给定这个白黑相交的格子,第一遍把坐标范围内的全部涂白,第二 ...

  5. 传统DNS的问题与HTTPDNS

    本篇学习笔记要掌握两个要点: 传统的 DNS 有很多问题,例如解析慢.更新不及时.因为缓存.转发.NAT 问题导致客户端误会自己所在的位置和运营商,从而影响流量的调度. HTTPDNS 通过客户端 S ...

  6. /etc/apt/sources.list" E212: Can't open file for writing解决方案

    :w !sudo tee % > /dev/null 解决.

  7. Java 输入/输出——处理流(DataInputStream/DataOutputStream、ByteArrayInputStream/ByteArrayOutputStream)

    DataInputStream和DataOutputStream分别继承字节流InputStream和OutputStream,它属于处理流,需要分别“套接”在InputStream和OutputSt ...

  8. Python生成器表达式

    https://www.cnblogs.com/liu-shuai/p/6098218.html 简介: 生成器表达式并不真正的创建数字列表,而是返回一个生成器对象,此对象在每次计算出一个条目后,把这 ...

  9. 过滤器会拦截 前端页面加载 js文件的请求

    学艺不精啊.....之前就总结过博客: JAVA中解决Filter过滤掉css,js,图片文件等问题 结果现在又犯了老错误~ 情况如下: index.jsp 页面的验证码输入栏绑定了异步验证(jQur ...

  10. 内部排序->插入排序->其它插入排序->表插入排序

    文字描述 和之前的插入排序比,表插入排序可以保证排序过程中不移动记录:因此表插入排序所用的存储结构和之前的顺序存储不同,表插入排序采用静态链表类型作为待排记录序列的存储结构,设数组中下标0的分量为表头 ...