一、对图片的处理

安装url-loader

然后再loaderli配置这样会把图片打包成base64格式

{ test: /\.(gif|png|jpg)\??.*$/, loader: 'url-loader' }

如果需要图片格式修改loader配置为

{ test: /\.(gif|png|jpg)\??.*$/, loader: 'url-loader?limit=100&name=resource/[name].[ext]' }

二、对字体的处理

也是用url-loader只需要改变正则变为

{ test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=100&name=resource/[name].[ext]' }

webpack对icon-font图片的处理的更多相关文章

  1. 快速上手制作Icon Font

    现在在提起Icon Font,已经不是什么新鲜的词汇了,网上已经有很多介绍它的文章,并且很多网站也已经将它用到,本篇主要是将制作Icon Font的整个流程整理一下,并且加入了自己在制作中遇到的问题, ...

  2. CSS Sprites+CSS3 Icon Font

    CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...

  3. 解决firefox和IE9对icon font字体的跨域访问问题

    何为跨域访问,为什么会有跨域限制?一切还得从浏览器的同源策略说起. 同源策略:是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能会受到影响,可以说Web是构建在同源策略基础 ...

  4. Icon Font浅谈

    这周继续在弄hybird app 的 UI框架的重构,进行到了编写换肤功能的阶段,而在做换肤之前,我想应该先弄一套框架内置的图标. 而图标无非就是两种做法: 1.图片 使用图片很正常,但是有缺陷的. ...

  5. Web 设计新趋势: 使用 SVG 代替 Web Icon Font

    如果你还在使用 Icon Font 作为网页中显示图标的实现方案,那么你可能有点 Out 了. 由于使用 Icon Font 显示图标存在一些缺陷,开发者们一直在致力于探索使用 SVG 作为替代的方法 ...

  6. (转)在iOS中使用icon font

    http://ued.taobao.org/blog/?p=8579 在开发阿里数据iOS版客户端的时候,由于项目进度很紧,项目里的所有图标都是用最平常的背景图片方案来实现.而为了要兼容普通屏与Ret ...

  7. 字体图标 icon font

    Icon font icon font 指的是用字体文件代替图片文件,来展示图标.特殊字体等元素的方法. 应用场景: iconfont的优缺点 大小能够自由地变化 颜色能够自由地改动 加入阴影效果 * ...

  8. 阿里UX矢量图标库–最强大的矢量图标库(Icon font制作力荐工具)

    继前面介绍过ICON-FONT的制作后,找了几个ICON库都是国外的今天偶然发现阿里巴巴的图标矢量库,www.iconfont.cn用了之后感觉很强大,丰富的图标库(集合阿里妈妈&淘宝的图标库 ...

  9. 在iOS中使用icon font

    博文转载至 http://www.cocoachina.com/industry/20131111/7327.html 在开发阿里数据iOS版客户端的时候,由于项目进度很紧,项目里的所有图标都是用最平 ...

  10. 在iOS开发中使用icon font的方法

    http://iconfont.cn/help/iconuse.html 在开发阿里数据iOS版客户端的时候,由于项目进度很紧,项目里的所有图标都是用最平常的背景图片方案来实现.而为了要兼容普通屏与R ...

随机推荐

  1. DB-MD:MD/主数据

    ylbtech-DB-MD:MD/主数据 主数据(MD Master Data)指系统间共享数据(例如,客户.供应商.账户和组织部门相关数据).与记录业务活动,波动较大的交易数据相比,主数据(也称基准 ...

  2. leetcode 189. 旋转数组(python)

    给定一个数组,将数组中的元素向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: [1,2,3,4,5,6,7] 和 k = 3输出: [5,6,7,1,2,3,4]解释:向右旋转 1 步: ...

  3. 130、TensorFlow操作多个计算图

    # Programming with multiple graphs # 当训练一个模型的时候一个常用的方式就是使用一个图来训练你的模型 # 另一个图来评价和计算训练的效果 # 在许多情况下前向计算和 ...

  4. day32—CSS多列布局学习

    转行学开发,代码100天——2018-04-17 关于多列布局,前期已经梳理过,今天的培训课程学习中再次提及,趁此也做个总结和检验. 多列布局的介绍参考: day08—css布局解决方案之多列布局   ...

  5. 测开之路六十四:UI测试平台之前端页面

    {% extends "base.html" %} {% block script %} <!-- 引入js文件,需要在base.html留入口,不然渲染会出问题. --&g ...

  6. Vagrant 手册之 Vagrantfile - 最低版本

    原文地址 可以在 Vagrantfile 中指定一组 Vagrant 的版本,以强制人们使用带有 Vagrantfile 的特定版本的 Vagrant.这可以帮助解决使用带有 Vagrantfile ...

  7. Bootstrap 学习笔记12 轮播插件

    轮播插件: <!-- data-ride="carousel"自动播放 --> <div id="myCarousel" class=&quo ...

  8. Linux多线程服务器端编程

    目录 Linux多线程服务器端编程 线程安全的对象生命期管理 对象的销毁线程比较难 线程同步精要 借shared_ptr实现写时拷贝(copy-on-write) 多线程服务器的适用场合与常用编程模型 ...

  9. EasyUI:Cannot read property 'width' of null

    最近在使用EasyUI DataGrid来做前端的报表开发,遇到了这个报错: Uncaught TypeError: Cannot read property 'width' of null 在网上查 ...

  10. 一波骚操作,我把 SQL 执行效率提高了 10,000,000 倍!

    作者:风过无痕-唐 http://www.cnblogs.com/tangyanbo/p/4462734.html 场景 我用的数据库是mysql5.6,下面简单的介绍下场景 课程表: create  ...