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. echart数据的实时更新

  2. HDU-2095-find your present (2)-位或/STL(set)

    In the new year party, everybody will get a "special present".Now it's your turn to get yo ...

  3. Windows与Linux获取进程集合的方法

    Windows: List<String> tasklist=new ArrayList<String>(); try { Process process = Runtime. ...

  4. 在任务管理中显示进程ID号

  5. P1305 新二叉树 /// 二叉树的先序遍历

    题目大意: https://www.luogu.org/problemnew/show/P1305 由题目可知,输入首位为 子树的根 其后为其左右儿子 则除各行首位后的位置中 没有出现的那个字母肯定为 ...

  6. marquee标签(跑马灯效果)

  7. 解决Eclipse建立Maven Web项目后找不到src/main/java资源文件夹的办法

    问题如题,明细见下图: 解决方法: 在项目上右键选择properties,然后点击java build path,在Librarys下,编辑JRE System Library,选择workspace ...

  8. AbstractByteBuf 源码分析

    主要成员变量 static final ResourceLeakDetector<ByteBuf> leakDetector = new ResourceLeakDetector<B ...

  9. 连接 MySQL 报错:Lost connection to MySQL server at 'reading authorization packet', system error: 34

    报错信息: Lost connection to MySQL server at 解决方案: use mysql; ; flush privileges; 参考: https://blog.csdn. ...

  10. 打开新窗口(window.open) open() 方法可以查找一个已经存在或者新建的浏览器窗口。 语法: window.open([URL], [窗口名称], [参数字符串])

    打开新窗口(window.open) open() 方法可以查找一个已经存在或者新建的浏览器窗口. 语法: window.open([URL], [窗口名称], [参数字符串]) 参数说明: URL: ...