weboack5webpack5用url-loader(file-loader)处理字体
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)处理字体的更多相关文章
- local JSON file loader in js
local JSON file loader in js "use strict"; /** * * @author xgqfrms * @license MIT * @copyr ...
- java中URL和File的相互转化
首先,想比较一下这两者的不同.URL用于网络,所以带有明显的protocol,而且对于中文及符号支持的很不好.File就是我们平常系统中的文件路径了,对于中文及符号都支持,但是已经没有protocol ...
- this.getClass().getResource("") url path file 区别
首先注意 "/word/appointDismiss.docx" 前面一定要加 /,有一次我就是忘记加/ 查了半天错, 不能写成 "word/appointDismiss ...
- Zend Guard Loader/Zend Loader是干什么的
Zend Guard Loader 是加速php的,能提高30%—40%速度.PHP 5.3.X 开始 Zend Optimizer 正式被 Zend Guard Loader 取代.在PHP 5.5 ...
- Jboss: Using reverse path on top path: /xxx
环境 jboss 5.2 原因 加载资源的协议错误.一般在加载文件的时候,URL 都是以 file: 开头,但是在 jboss 上时,由于其虚拟化了路径,导致协议不一致,并且找不到外部的配置文件. 分 ...
- Webpack的详细配置,[Webpack中各种loader的安装配置]
在使用webpack的时候,你是不是被以下这种报错所困扰: 注意看 黄色框中标注的 You may need an appropriate loader to handle this file typ ...
- 如何在webpack中使用loader
一.什么是loader loader 用于对模块的源代码进行转换.loader 可以使你在 import 或"加载"模块时预处理文件.因此,loader 类似于其他构建工具中“任务 ...
- 怎样写一个webpack loader
div{display:table-cell;vertical-align:middle}#crayon-theme-info .content *{float:left}#crayon-theme- ...
- Tomcat从零开始(十)Loader
第十课: 不知不觉就10篇blog了,说实话,我是第一次更这么长时间的Blog. 嗯,今天说说Loader,在以前的课程中,也就是内个能使用最初级的servlet的那一节,我们使用了URLClassL ...
- implemented loader.php
http://stackoverflow.com/questions/11787176/manage-url-routes-in-own-php-framework This is how i imp ...
随机推荐
- 微信小程序【关于地址信息的接入以及自动选择当前位置】
在做收货地址的时候,通常会让用户填写或者打开地图选择收获地址,此时就需要用到微信提供的地址API,在使用地址API的时候需要注册对应的API,而且地址API会经常调整,需要关注官方公告,下面就是关于地 ...
- C语言小程序-天天酷跑类游戏 26号完成
1.创建游戏内背景 2.实现人物 奔跑 跳跃 优化帧 3.障碍物 出现 https://kxd.lanzoul.com/iKXU20elmtah 开源地址 半成品
- shell:判断某个变量是否包含字符串/变量的方法
尝试了有3种方法: 1.使用"=~"符号,注意前后必须要有空格! ** 可以输出正确结果,被匹配的字符串必须要有引号括起来!** [clouder@ana53 bin]$ a1=' ...
- JZOJ 捕老鼠
题目 实际上经转换得: 给了 \(n(n \le 5 \times 10^5)\) 条线段,求覆盖 \([1..n]\) 需要的最少条数 分析 设 \(f_i\) 表示覆盖了 \([1..n]\) 时 ...
- 【多线程与高并发】- 浅谈volatile
浅谈volatile 目录 浅谈volatile 简介 JMM概述 volatile的特性 1.可见性 举个例子 总结 2.无法保证原子性 举个例子 分析 使用volatile对原子性测试 使用锁的机 ...
- CCRD_TOC_2007_EULAR专辑_2
中信国健临床通讯 EULAR 2007专辑II 目录 类风湿关节炎 1 Etanercept联合MTX治疗RA导致炎症与骨破坏进展之间的失关联也见于单关节水平:来自TEMPO的研究数据 Landewe ...
- 关于cnpm的卸载与重装
1.卸载原有旧的版本: npm uninstall -g cnpm --registry=https://registry.npm.taobao.org 2.注册模块镜像: npm set regis ...
- 云原生数据库TDSQL-C 容灾的实践和探索
云原生数据库TDSQL-C作为腾讯云架构平台部核心数据库产品之一,致力于为云上ToB用户和公司自研业务提供集高性能.低成本.大存储.低延迟.秒级扩缩容.极速回档.Serverless化七大特性于一体的 ...
- js正则匹配多行文本
原文:https://lwebapp.com/zh/post/regular-expression-to-match-multiple-lines-of-text 需求 最近有小伙伴提了个需求,想用正 ...
- vue 状态类展示使用红绿圆点
vue 状态类展示使用红绿圆点通常对于一些在线.离线类的展示使用图标展示比使用文字描述会更加清晰直观.项目中使用的代码如下: HTML <el-table-column prop="s ...