开发者学堂课程【前端自动化构建工具 Webpack 第15课时：webpack 中使用 url-loader 处理字体文件】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/587/detail/8223
webpack 中使用 url-loader 处理字体文件
举例释义
index . scss -01.webpack- study - Visual Studio Code
indexhtml indexCSs JS mainjs webpack . config . js index . SSs
html , body {
. box {
width :220px; height :120px;
11默认情况下, webpack 无法处理 cSs 文件中的 url 地址,不管是图片还是字体库,只要是 URL 地址,都处理不了
background : url ('../ images /生小孩 jpg '); background - size : cove ;
10 box2{
width :220px;
12 height :120px;
13 background : url (＇../images2/生小孩 jpg ');
14 background - size : cover ;
15
标出 调试控制台 I : node
[34]./ src / css / index . Scss 1.29 kB {}[ built ]+22 hidden modules
Child html - webpack - plugin for " index . html ":
1a5set
[0]./ node П odules / html - webpack -plugin2.30.1hml- webpack - plugin / lib / loader . js !./ src / index . html 778 bytes {0} [ built ]
[1]./ node _ modules /_lodashe4.17.40lodash/ lodash . js 540 kB {}[ built ][3]( webpack )/ buildin / module . js 495 bytes {}[ built ]
webpack : Co Т piled successfully
webpackconfigjs -01.webpack- study - Visual Studio Code
5indexhtml indexSS JS mainjs ! webpack . confhgs X indexSCSS
1ndex,
module :(1/配置所有第三方 loader 模块的
21
rules :[1/第三方模块的匹配规则
22
{ test /. css $/, use :[' style - loader ',' css -1oader']),/处理 css 文件的loader 23
( test :/ less $/, use :[' style - loader ','cs8-loader',' less - loader ']},//处理 less 文件的loader 24{ test :/. scss $/, use :[' style - loader ',' css - loader ',' sass - loader ']),//处理 scss 文件的 loader 25
{ test :/.( pgIpnglgifIbmpI う peg )$/, use :' url - loader ?1init=7631& name =[ hash :8]-[ name ].[ ext ]＂},//处理图片路径的 loader
1/1imit 给定的值,是图片的大小,单位是 byte ,如果我们引用的图片,大于或等于给定的1imit 值,则不会被转为 base64格式的字符串,如果图片小于给定的1imit 值,则会被转为 base64的字符串
28
29
1: node
[34]./ src / css / index . SCss 1.29 kB {}[ built ]+22 hidden П odules
Child html - webpack - plugin for " index . html ":
1asset
[0]./ node modules /_ html - webpack -plugin2.30.1html- webpack - plugin / lib / loader . jsl ./ src / index . htnl 778 bytes [ built ]
]./ node _П odules /_lodashe4.17.4lodash/Л odash . js 540 kB {0}[ built ]
[3] ( webpack )/ buildin / module . js 495 bytes {}[ built ] ack : Co Т piled successfully .
body . box {
width :220px; height :120px;
11默认情况下, webpack 无法处理 cSs 文件中的 url 地址,不管是图片还是字体库,只要是 URL 地址,都处理不了
background : url ('../ images /生小孩 jpg '); background - size : cover ;
box2{
11 width :220px;
12 height :120px;
13 background : url ('../ images /生小孩 jpg ');
14 background - size : cover ;
调试控制台 1: node
es {}[ built ]
[27]./ node _ modules / webpack / hot nonrecursive \. V Л ogS 170 bytes { [ built ]
+34 hidden modules
Child html - webpack - plugin for " index . html ":
Asset Size Chunks Chunk Names
5be4fd4571b35bd4f4f1.hot- update . json 44 bytes [ emitted
4 modules
webpack : Co Т piled successfully .
webpackconigjs -01.webpack- study - Visual Studio Code
indexhtml 3indexCSS J5 mainjs Owebpack . configs x g indexSCS5 C
t1Lename: 1ndex,
18
19
20 module :(1／配置所有第三方1oader模块的
21
rules :【1／第三方模块的匹配规则
22 { test :八． css $/, use :[' style - loader ',' css - loader ']},1／处理 css 文件的 loader
23 ( test :八． less $/, use :[' style - loader ',' css - loader ',' less - loader ']),／处理 less 文件的 loader
24 { test :八． scss $/, use :[' style - loader ',' css - loader ',' sass - loader ']},/／处理 scss 文件的 loader
25 { test :八．( pg IpnglgifIbmpljpeg )$/, use :' url - loader ? limit =731& name =[ hash :8]-[ name ].[ ext ]＇},1／处
理图片路径的 loader
26
1/ limit 给定的值，是图片的大小，单位是 byte ，如果我们引用的图片，大于或等于给定的1imit 值，则不会被转为 base64格式的字符串，如果图片小于给定的 符串
28
29
调试控制台 E
I : node
[34]./ src / css / index . SCSs 1.29кв{}[ built ]
+22 hidden П odules
Child html - webpack - plugin for " index . html ":
1a5Pt
[]./ node _П odules /_ html - webpack -plugir2.30.1htnl- webpack - plugin / lib / loader . js !./ src / index . htnl 778 bytes {}[ built ][1]./ node _ modules /_Jodashe4.17.40lodash/ Iodash . js 540кв(}[ built ]
[3]( webpack )/ buildin / module . js 495 bytes {}[ built ]
ebpack : Co Т piled successfully .
组件
无数可复用的组件,包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
Glyphicons 字体图标 Glyphiccns 字体图标
所有可用的图标
包括250多个来自 Glyphicon Halings 的宇体图玩。 Gyphicens Halfings 一般是收费的,1 输入框组
bootstrap . R
① ww bootcss . com
Bootstrap
简洁、直观、强悍的前端开发框架，让 web 开发更迅速、简单。
< meta name =" viewport ＂ content =" width = device - width , initial - scale =1.0">< meta http - equiv =" X - UA - Copatible " content =" ie = edge ">
< title > Document
