file-loader(url-loader)可以用解析打包字体。

webpack配置loader

\\ webpack.config.js
const webpack = require("webpack");
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin"); // 生成.html文件的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 把样式提取为单独的css文件 的插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 清除构建目录的插件
module.exports = {
entry: "./src/main.js", // 打包入口文件
mode: "development", // 使用开发模式
devServer: {
// 本地服务器代理
contentBase: path.join(__dirname, "dist"), //指定在哪个目录下找要加载的文件
compress: true,
port: 8080, // 配置端口
hot: true, // 配置热更新
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
ignoreOrder: false,
}),
new htmlWebpackPlugin({
favicon: "./public/favicon.ico",
filename: "index.html",
template: "./public/index.html",
}),
new CleanWebpackPlugin(),
],
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"], // 处理css的loader
},
{
//解析字体
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: "file-loader", // url-loader 也可以用来解析字体
},
],
},
output: {
path: path.join(__dirname, "dist"),
filename: "app.[hash:16].js",
publicPath: "/", // 也可以用来处理路径问题,加在所有文件路径前的根路径
},
};

配置loader的demo https://github.com/cisbest/webpack5-demo-font

weboack5webpack5用url-loader(file-loader)处理字体的更多相关文章

  1. local JSON file loader in js

    local JSON file loader in js "use strict"; /** * * @author xgqfrms * @license MIT * @copyr ...

  2. java中URL和File的相互转化

    首先,想比较一下这两者的不同.URL用于网络,所以带有明显的protocol,而且对于中文及符号支持的很不好.File就是我们平常系统中的文件路径了,对于中文及符号都支持,但是已经没有protocol ...

  3. this.getClass().getResource("") url path file 区别

    首先注意 "/word/appointDismiss.docx" 前面一定要加 /,有一次我就是忘记加/ 查了半天错, 不能写成 "word/appointDismiss ...

  4. Zend Guard Loader/Zend Loader是干什么的

    Zend Guard Loader 是加速php的,能提高30%—40%速度.PHP 5.3.X 开始 Zend Optimizer 正式被 Zend Guard Loader 取代.在PHP 5.5 ...

  5. Jboss: Using reverse path on top path: /xxx

    环境 jboss 5.2 原因 加载资源的协议错误.一般在加载文件的时候,URL 都是以 file: 开头,但是在 jboss 上时,由于其虚拟化了路径,导致协议不一致,并且找不到外部的配置文件. 分 ...

  6. Webpack的详细配置,[Webpack中各种loader的安装配置]

    在使用webpack的时候,你是不是被以下这种报错所困扰: 注意看 黄色框中标注的 You may need an appropriate loader to handle this file typ ...

  7. 如何在webpack中使用loader

    一.什么是loader loader 用于对模块的源代码进行转换.loader 可以使你在 import 或"加载"模块时预处理文件.因此,loader 类似于其他构建工具中“任务 ...

  8. 怎样写一个webpack loader

    div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme- ...

  9. Tomcat从零开始(十)Loader

    第十课: 不知不觉就10篇blog了,说实话,我是第一次更这么长时间的Blog. 嗯,今天说说Loader,在以前的课程中,也就是内个能使用最初级的servlet的那一节,我们使用了URLClassL ...

  10. implemented loader.php

    http://stackoverflow.com/questions/11787176/manage-url-routes-in-own-php-framework This is how i imp ...

随机推荐

  1. java2022.7.9

    知识点

  2. Spring框架-IoC核心

    spring框架(spring全家桶) spring FrameWork springBoot+springCloud+springCloud Data Flow 一:spring的两大核心机制: I ...

  3. Blue Mary开公司

    Blue Mary开公司 题面:[JSOI2008]Blue Mary开公司 题目大意: 每次加入一条形如 \(y=Px + S - P\) 的直线,询问 \(x=T\) 时此处最高的 \(y\) 值 ...

  4. 如何在VC++ 6.0中实现拖动指令改变执行路径?

    前文提要: 在VC6.0之后出现的VS系列开发工具都具有的调试功能:移动指针更改执行流,VC6不支持这个UI操作. 调试程序暂停时,源代码或"反汇编"窗口边距处的黄色箭头标记要运行 ...

  5. SQL语句中 left join 后用 on 还是 where,区别大了!

    前天写SQL时本想通过 A left B join on and 后面的条件来使查出的两条记录变成一条,奈何发现还是有两条. 后来发现 join on and 不会过滤结果记录条数,只会根据and后的 ...

  6. Gateway集成Netty服务

    目录 一.Netty简介 二.Netty入门案例 1.服务端启动 2.通道初始化 3.自定义处理器 4.测试请求 三.Gateway集成 1.依赖层级 2.自动化配置 四.配置加载 1.基础配置 2. ...

  7. 开源分布式任务调度系统就选:DolphinScheduler

    分布式任务调度这个话题是每个后端开发和大数据开发都会接触的话题.因为应用场景的广泛,所以有很多开源项目专注于解决这类问题,比如我们熟知的xxl-job. 那么今天要给大家推荐的则是另一个更为强大的开源 ...

  8. Oracle DataGuard 出现 GAP 修复

    下面我们通过实验来进行演示如何修复: 一.主库切几个最新的归档,然后手工删掉,重新开启DG同步. 1.备库关闭应用日志和数据库 SQL> ALTER DATABASE RECOVER MANAG ...

  9. 【Redis的三种数据删除策略】定时定期惰性,超出内存就自动清理

    https://blog.csdn.net/DQWERww/article/details/126453008 https://blog.csdn.net/qq_38056518/article/de ...

  10. offer_48

    题目:写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 思路: /* 首先看十进制是如何做的: 5+7=12,三步走 第一步:相加各位的值,不算进位,得到2. 第二步:计 ...