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

引用字体图标,bootstrap有提供字体图标
1.安装bootstrap

cnpm i bootstrap -S

2.导入bootstrap

//注意:如果要通过路径的形式,去引入node_modules中相关的文件,可以直接省略路径前面的node_modules这一层目录,
直接写包的名称,然后后面跟上具体的文件路径
//不写node_modules这一层目录,默认就会去node_modules中查找
import 'bootstrap/dist/css/bootstrap.css'

3.匹配字体文件,配置所有第三方loader模块的

module:{
    rules:[
    {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//处理字体文件的loader
    ]
}

原文地址:https://www.cnblogs.com/songsongblue/p/11877166.html

时间: 2024-10-13 01:33:48

15 webpack中使用url-loader处理字体文件的相关文章

webpack中的加载器

通过loader打包非js模块 在实际开发过程中,webpack 默认只能打包处理以.js 后缀名结尾的模块,其他非.js 后缀名结 尾的模块,webpack默认处理不,需要调用loader加载器才可以正常打包,否则会报错! loader加载器可以协助webpack打包处理特定的文件模块,比如: less-loader可以打包处理 .less相关的文件 sass-loader可以打包处理 .scss相关的文件 url-loader可以打包处理css中与url路径相关的文件 loader的调用过程

@ font-face 引入本地字体文件

@font-face { font-family: DeliciousRoman; src: url('-/Delicious-Roman.otf'); font-stretch: condensed; //拉伸 font-style: oblique; //斜体 font-weight: bold; //粗体 } url里写字体文件的路径,在线或者本地的都行.如果引入了重置样式,要在重置里把font-family的值改成你定义的名字.

Webpack中的路径

webpack中涉及许多路径参数的配置.在此做个整理. context context是webpack编译时的基础目录,entry入口会相对于此目录查找. 若不配置,默认值是当前目录,webpack设置context.默认值代码: this.set("context", process.cwd()); 即webpack运行所在目录. context应该是绝对路径,假设入口是src/main.js,则可以设置 { context: path.resolve("./src&quo

在webpack中使用postcss之插件包precss

precss是一个预处理css的插件包,集成了很多postcss插件的功能,比如嵌套,变量,继承,混合,循环,判断.下面来介绍如何在webpack中使用precss.一.新建项目1.新建package.json #自动生成package.json文件 npm init 2.新建webpack.config.js module.exports = { entry: "./main.js", output: { path: __dirname, // __dirname是node.js中的

MVC中的URL路由(一)

URL路由系统通过对请求地址进行解析从而得到以目标Controller名称为核心的路由数据.Url路由系统最初是为了实现请求url与物理文件路径分离而建立的,MVC的Url Route是将Url地址与物理文件映射转移到了目标Controller的映射. Url路由不是ASP.NET MVC特有的,而是建立在ASP.NET上面的,MVC的只是对这个路由的拓展使用(asp.net也开始使用这拓展了). 我们在App_Start文件夹中找到RouteConfig.cs的文件,打开看 1 public

Webpack中的sourcemap

Webpack中sourcemap的配置 sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术.尤其是如今前端开发中大部分的代码都经过编译,打包等工程化转换.比如开发环境下用scss写样式, 想在浏览器中在线编辑css那样编辑scss就不是那么容易了.从我自己看过的资料中, sourcemap的概念最早出现在12年, jquer1.9是较早支持sourcemap的库.这篇博客比较有代表性:Introduction to JavaScript Sourc

HTTP中的URL长度限制

由于之前的一个web项目中,要用get方法去获取数据,但结果时常报错,经过仔细排查才发现原来url长度超过了限制,通过缩短url和发送多次请求的方法解决了该问题,之后在网上查了些资料,发现这个问题还是内藏玄机,要比自己想的复杂. 首先,其实http 1.1 协议中对url的长度是不受限制的,协议原文: The HTTP protocol does not place any a priori limit on the length of a URI. Servers MUST be able t

js中获取URL中指定的查询字符串

js中获取URL中指定的搜索字符串,主要利用location对象实现,废话少说,上代码. 1 function getSearchString(key) { 2 // 获取URL中?之后的字符 3 var str = location.search; 4 str = str.substring(1,str.length); 5 6 // 以&分隔字符串,获得类似name=xiaoli这样的元素数组 7 var arr = str.split("&"); 8 var ob

减少HTTP请求之将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片(大型网站优化技术)

原文:减少HTTP请求之将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片(大型网站优化技术) 在网站开发过程中,对于页面的加载效率一般都想尽办法求快.那么,怎么让才能更快呢?减少页面请求 是一个优化页面加载速度很好的方法.上一篇博文我们讲解了 “利用将小图标合成一张背景图来减少HTTP请求”,那么,这一篇博文将讲解  “ 将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片”. 一.为何选择将图片转成二进制并生成Base64编码,可以在网页中通过url查看