1. 安装 file-loader

npm install file-loader --save-dev

2. 在webpack.config.js中配置

module.exports={
//...code
module:{
rules:[
{ //字体文件
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader',
options: {
name: "[name].[ext]",
outputPath: './fonts'
}
}
]
}
}

3. 使用方法

直接启动webpack进行项目打包即可

webpack处理字体文件的更多相关文章

  1. vue-cli webpack配置cdn路径 以及 上线之后的字体文件跨域处理

    昨天搞了一下vue项目打包之后静态资源走阿里云cdn. 配置了半天,终于找到了设置的地方 config/index.js 里面设置build 下的 assetsPublicPath 打包的时候便可以添 ...

  2. 15 webpack中使用url-loader处理字体文件

    引用字体图标,bootstrap有提供字体图标 1.安装bootstrap cnpm i bootstrap -S 2.导入bootstrap //注意:如果要通过路径的形式,去引入node_modu ...

  3. Webpack多入口文件、热更新等体验

    Webpack现今流行的前端打包工具,今儿本人也来分享下自己学习体验. 一.html-webpack-plugin 实现html模板文件的解析与生成 在plugins加入HtmlWebpackPlug ...

  4. webpack4 系列教程(十一):字体文件处理

    教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步<webpack4 系列教程(十一):字体文件处理>原文地址.或者来我的小站看更多内容:godbmw.com 0. 课程介 ...

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

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

  6. vue中引入字体文件

    在用vue来写一官网的时候,想引入外部字体文件,毕竟总感觉他自己的字体有点难看,在这里记录下 1.先下载字体文件所需的.ttf文件 我这里想引入的是华文行楷字体 百度后下载了一个3M多的ttf文件 2 ...

  7. vue中引入字体图标报错,找不到字体文件

    在用vue + webpack进行开发的时候,在引用字体图标遇到字体无法加载的问题: 报以下错误 搞了好久没搞定,最后才找到解决方法(还是没有找到原因) 修改字体图标的css中引入字体文件的路径 以前 ...

  8. webpack整合 .vue 文件,集成 vue-loader

    webpack集成vue-loader 创建一个文件夹 test_webpack_vue 在 test_webpack_vue 下新建目录 src 在 src 目录下 新建文件 index.html ...

  9. 在CabloyJS中将Webpack生成的文件自动上传到阿里云OSS

    背景 阿里云OSS提供了一个Webpack插件,可在Webpack打包结束后将webpack生成的文件自动上传到阿里云OSS中 下面看看在CabloyJS中如何使用该插件 新建项目,并配置MySQL连 ...

随机推荐

  1. csps模拟8990部分题解

    题面: 666: 重点在题意转化:每个数可以乘k,代价为k,可以减一,代价为1, 所以跑最短路即可 #include<iostream> #include<cstdio> #i ...

  2. 线段树区间合并+k维空间的曼哈顿距离——cf1093G好题

    和去年多校的CSGO一样,用状态压缩来求Manhattan距离的最大值 然后要用线段树维护一下区间最大值 /* k维空间给定n个点,两个操作 1 i b1 b2 .. bk : 修改第i个点的坐标 2 ...

  3. ListenerExecutionFailedException: Listener threw exception

    rabbitmq 监听的队列名称写错导致404找不到队列

  4. day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等

    Vue学习四之过滤器.钩子函数.路由.全家桶等   本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...

  5. Mysql优化系列之数据类型优化

    本篇是优化系列的第一篇:数据类型 为了不产生赘述,尽量用简洁的语言来描述. 在选择数据类型之前,首先要知道几个原则: 更小的通常更好 尽量使用可以正确存储数据的最小数据类型.更小的数据类型意味着更快, ...

  6. python语句结构(if判断语句)

    一.python语句结构分类 条件控制语句:if 语句 if....elif语句 if嵌套 循环语句:while语句    for循环 控制语句:break.continue.pass语句 二.pyt ...

  7. java_Properties集合

    package propertiesTest; import java.io.FileReader; import java.io.FileWriter; import java.io.IOExcep ...

  8. 《Practices of an Agile Developer:Woring in the Real World》读书笔记 PB16110698(~3.22)第三周

    <Practices of an Agile Developer:Woring in the Real World>读书笔记  本周我阅读了<高效程序员的45个习惯:敏捷开发修炼之道 ...

  9. 2、docker镜像管理

    Docker镜像管理 镜像是Docker容器的基础,想运行一个Docker容器就需要有镜像.我们上面已经学会了使用search搜索镜像.那么这个镜像是怎么创建的呢? 创建镜像 镜像的创建有以下几种方法 ...

  10. 论文翻译——Fast-R-CNN(端到端开篇, End to end)

     快速的区域卷积网络方法(Fast R-CNN)   论文地址:https://arxiv.org/abs/1504.08083 摘要: 本文提出一种基于快速的区域卷积网络方法(Fast R-CNN) ...