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. [NOI 2018]冒泡排序

    题意:求所有字典序大于给定序列且满足条件的排列个数之和. 思路: 考虑dp即可,打表出卡特兰数优化,直接dp可以44... #include <bits/stdc++.h> using n ...

  2. springMVC 400 错误

    1. 今天发现一个奇葩的问题, springMVC出现400错误, 查了很久发现是因为一个参数为int型,而前台传得是String. 这是bug么.

  3. iOS开发之SceneKit框架--SCNNode.h

    1.SCNNode简介 SCNNode是场景图的结构元素,表示3D坐标空间中的位置和变换,您可以将模型,灯光,相机或其他可显示内容附加到该元素.也可以对其做动画. 2.相关API简介 初始化方法 // ...

  4. Linux权限命令chmod

    一.Linux chmod命令修改文件和文件目录权限(默认情况下只有root用户才能使用).命令格式:chmod+修改内容+要修改的文件或者 目录 或者 chmod -R 修改内容 要修改的文件或者 ...

  5. Java程序员注意:Tomcat Get请求的巨坑!

    Tomcat8.5,当Get请求中包含了未经编码的中文字符时,会报以下错误,请求未到应用程序在Tomcat层就被拦截了. Tomcat报错: java.lang.IllegalArgumentExce ...

  6. SpringCloud学习笔记《---04 Hystrix---》基础篇

  7. spring自定义bean工厂模式解耦

    在resources下创建bean.properties accountService=cn.flypig666.service.impl.AccountServiceImpl accountDao= ...

  8. LuoguP3498 [POI2010]KOR-Beads

    呀呀呀,临走10分钟刷一道水题 然而只是记一下第一次hash被卡 各种模数都被卡了... 本来想打双哈希了,后来皮了一下,模数改成了998244353,然后竟然A掉了 正着hash一遍,反着hash一 ...

  9. 常用Linux Tips(不定期更新)

    查看本机所有开放端口 lsof -i -P | grep -i listen 查看一段文本单词出现频率 awk '{b[length($0)]++;total_lines++;for(i=1;i< ...

  10. [JZOJ4639] 【NOIP2016提高组A组7.16】Angel Beats!

    题目 描述 题目大意 给你一棵树,每次询问两个点,求出这两个点的子树的重心到其中每个点的距离和. 重心的定义是到其中每个点距离和最小的点(不一定在两棵子树内) 思考历程 想想以前我是怎么求重心的呢-- ...