webpak配置字体图标有两种方式

一、将字体图标和css打包到同一个文件中。

1.首先需要安装url-loader

npm install --save-dev url-loader 

2.相关配置如下(开发环境使用这个方式是可以的)

{
test:/\.(png|woff|woff2|svg|ttf|eot)$/,
use:{
loader:'url-loader',
options: {
limit: 100000, //这里要足够大这样所有的字体图标都会打包到css中
}
}

上文中的limit一定要保证大于最大字体文件的大小,因为这个参数是告诉url-loader,如果文件小于这个参数,那么就以Data Url的方式直接构建到文件中。使用这种方式最方便,不用打包后路径的问题,但是缺点就是构建出来的文件特别大,如果线上不要使用这种方式打包。

二、将字体图标独放打包到一个文件夹中。

1.首先需要安装file-loader

npm install --save-dev file-loader

2.相关配置如下(此方式打包时使用)

{
test: /\.(woff|woff2|svg|ttf|eot)$/,
use:[
{loader:'file-loader',options:{name:'fonts/[name].[hash:8].[ext]'}}//项目设置打包到dist下的fonts文件夹下
]
}

打包中会遇到的问题就是路径不对如图是我开发时我把font.css和字体图标分开放,webpack打包会把所有的css打包到一个css文件夹中,字体图标一个文件夹中,

第一个是打包前的位置存放,第二个是打包后位置存放,按理说应该打包后和打包前位置没有任何变化。但是却找不到字体图标,当我打开打包后的css文件发现,

webpack打包后的css文件中所有引用的路径‘./’或者是‘../’都会被清除掉这点很关键。

问题可以定位到单独打包css那里肯定出现了问题,在单独打包css那里可以添加一个路径会自动给引入的这些文件添加路径 例如:publicPath:'../',会在引用路径前添加上../

如上图设置后在打包路径都就引入正常了。图片路径也是这个问题导致。同样也就解决了图片路径的问题

webpack3配置字体图标和打包相关问题的更多相关文章

  1. webpack打包字体图标报错的解决办法

    webpack打包字体图标需要两个加载器  url-loader 和 file-loader 另外  字体图标的引入方式  本来应该是  url("....") 这样的方式,但是w ...

  2. vue项目打包部署elementUI的字体图标丢失问题

    自己搭建的Vue项目,没有使用vue-cli,引入elementUI时,使用的是webpack直接打包工具,发现字体图标丢失你 记录一下解决办法: webpack module配置:(build目录下 ...

  3. Vue+elementUI build打包部署后字体图标丢失问题

    错误描述:Vue+elementUI  build打包部署后字体图标丢失,控制台显示文件element-icons.woff和element-icons.ttf文件404 错误展现: 控制台报错截图 ...

  4. Maven打包pom里面配置exclude 排除掉环境相关的配置文件

    Maven打包pom里面配置exclude 排除掉环境相关的配置文件 有几种方式:1. 打包时,指定环境参数把环境的配置文件复制过去2. 不打包所有的环境相关的配置文件,直接由运维的人维护 可以在上传 ...

  5. vue iView 打包后 字体图标不显示

    问题描述: 今天webpack打包后发现iView 字体图标不显示 解决方案: build/webpack.prod.conf.js 这个文件里面 module: { rules: utils.sty ...

  6. webpack打包绝对路径引用资源和element ui字体图标不显示的解决办法

    webpack打包绝对路径引用资源解决办法: 打开webpack.prod.conf.js 找到output:增加 publicPath: './',  即可,如图  element ui字体图标不显 ...

  7. .Net 网站配置文件 webconfig 配置。 字体图标+视频播放 以及 文件上传

    ASP.NET MVC 上传大文件时404 原来IIS7的上传文件大小,即便是在经典模式下,也一定要在system.webServer里设置,加上去就OK了 <system.webServer& ...

  8. 使用jenkins 构建时,字体图标报错的问题。

    最近一个项目开发中,我们在本地进行项目打包时,可以正常打包. 但是在使用jenkins构建时,一直报错,提示无法加载字体文件.can't resolve module '....xxxx.TTF ' ...

  9. elementUI字体图标不显示问题

    原文链接: 点我 自己搭建的Vue项目,没有使用vue-cli,引入elementUI时提示字体图标404,找不到文件,如下错误: GET http://localhost:9090/WEB-INF/ ...

随机推荐

  1. MySQL操作中的一些细节及良好习惯--------持续更新中...

    1.尽量不要写太过复杂的SQL查询,不要想着非要一次性将结果全部以前端要求的形式返回出来,可以多次分开查询,这样逻辑清晰,问题解决速度快,方便维护,并且SQL的效率也高. 2.在使用联表查询的时候,关 ...

  2. PHP die与exit的区别

    最近听见有人说die和exit区别,bula~bula.决心一探究竟. 翻了翻PHP 5.6的源码(源码的位置为zend目录下zend_language_scanner.l大约是1014~1020行) ...

  3. ajaxfileupload批量上传文件+图片尺寸限制

    1.首先展示ajaxfileupload代码,在这里修改为批量上传 //ajaxfileupload不展示全部代码,这是修改前与修改后代码对比,目的是上传多个文件 createUploadForm: ...

  4. Python比较运算符

    判断两个对象之间的关系,和条件选择和循环结合使用的 以下假设变量a为10,变量b为20: 示例1:输入三个互不相等的整数,按照从小到大输出 num01,num02,num03 = eval(input ...

  5. 802.1X和NAP整合实验手册

    实验描述 公司内部有多个部门,创建了域的架构,并搭建了DHCP服务器和Radius服务器,要求每个部门都独享一个网段,实现每位用户插上网线后,跳出窗体进行身份验证,如果用户通过验证,根据用户所在的部门 ...

  6. 基于WebSocketSharp 的IM 简单实现

    websocket-sharp 是一个websocket的C#实现,支持.net 3.5及以上来开发服务端或者客户端.本文主要介绍用websocket-sharp来做服务端.JavaScript做客户 ...

  7. C编程之 一个容易忽视但是十分严重的小错误

    while(...) { ...if(a=b) continue; } 调试时就一直执行continue.一直找不到原因,后面才发现是少一个"=": 还有一次就是也是在if中,if ...

  8. HDU - 2612 bfs [kuangbin带你飞]专题一

    分别以两个人的家作为起点,bfs求得到每个KFC最短距离.然后枚举每个KFC,求得时间之和的最小值即可. 此题不符合实际情况之处:  通过了一个KFC再去另一个KFC可以吗? 出题人都没好好想过吗? ...

  9. Redux:从action到saga

    前端应用消失的部分 一个现代的.使用了redux的前端应用架构可以这样描述: 一个存储了应用不可变状态(state)的store 状态(state)可以被绘制在组件里(html或者其他的东西).这个绘 ...

  10. HTTP协议报文结构及示例

    HTTP基本架构 下面我们用一张简单的流程图来展示HTTP协议基本架构,以便大家先有个基本的了解. 9.png Web Client可以是浏览器.搜索引擎.机器人等等一切基于HTTP协议发起http请 ...