开发者学堂课程【前端自动化构建工具 Webpack ： webpack 中 url-loader 的使用】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/587/detail/8222
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 ;
module :(1／配置所有第三方 loader 模块的 Eules :【1／第三方模块的匹配规则( test :八． css $/, use :[' style - loader ',' css - loader ']。
／处理 css 文件的 loader ( test :八． less $/, use :[' style -1oader',' css - loader ','1ess- loader ']},／处理1ess文件的 loader
【 test :
scss $/, use :[' style - loader ',' css - loader ',' sass - loader ']),
/处理 scss 文件的 loader
( test :
( jpgIpngIgifIbmpIjpeg )$/, use :' url - loader ?1init=7631name=[ hash :8]-[ name ].[ ext ]'),1
／处理图片路径的1oader
1 limit 给定的值，是图片的大小，单位是 byte ，如果我们引用的图片，大于或等于给定的1init值，则不会被转为base64格式的字符串，如果图片小于给定的1imit值，则会被转为base64的字符串gin / lib / loader . js !./ sr / index . html T78 byts {}[ built ]
调试控制台 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 .
23 { test ：ハ． less $/, use :[' style - loader ',' css - loader ',' less - loader ']},
//
处理 less 文件的loader 鲜用三
{ test :ハ． scss $/, use :[' style - loader ',' css - loader ',＇ sass - loader ']},//处理 scss 文件的 loader
{ test ：ハ．(pgIpnglgiflbmp1jpeg)$/, use :' url - loader ? limit =7631& name =[ hash :8]-[ name ].[ ext ]＂}
,/／处理图片路径的 loader
1/1imit给定的值，是图片的大小，单位是 byte ，如果我们引用的图片，大于或等于给定的 limit 值，则不会被转为base64格式的字符串，如果图片小于给定的1imit值，则会被转为base64的字符串
{ test :八．( ttfleotIsvg I woffIwoff2)$/, use :'ur1-1oader'},/／处理字体文件的1oader
{ test :八． js $/, use :' babel - loader ', exclude :/ node _ modules /},
/／配置 Babel 来转换高级的ES 语法
29
30
I : powershel
VAll packages installed (29 packages installed from П pm registry , used 6s, speed 32.66kB/ s , json 46(181.57kB), tarball e8) PS C :\ Users \1iulongbin\ Desktop \day6＼代码＼01.webpack- study > c П pn ibabel - preset - env babel preset - stage -0-D
VInstaled 2packages
VLinked 801atest versionS VRun 0scripts
Recently updated ( since 2017-10-26):2packages( detail see file C :\ Users \ liulongbin \ Desktoplday Б＼代码＼01.webpack- study \ node _ modules \. receni ly _ updates . txt )
+ babel - preset -env1.6.1,browsersliste2.6.1caniuse-lite1.0.30000755(1.0.30000757)(14:01:04)
VAll packages installed (69 packages installed from П pm registry , used 9s, speed 52.27kB/ s , json 82(253.21kB), tarball 225.78kB)叹y8s\ uiulongbin \Desktoplday6＼代码＼01.webpack- study >0
路径错误GET http://ocalhost3009/node modules / bootstrap / dist / Css / bootstrap .C55 1ocalhost/:1e
net :: ERR _ ABORTED
tH И R ] Waiting for update signal from DS ..… bundle . isisourcemap :754
bundle . is :10429
twDS ] Hot Module Replacement enabled . bunde . is :1581
General
Request URL :http://localhost:3000/node_modules/bootstrap/dist/css/bootstrap. css Request Method : GE Т l
Status Code : e404 Not Found
Remote Address :127.0.0.1:3000
Referrer Policy : no - referrer - when - downgrade
TResponse Headers view source
Connection : keep - alive Content - Length :184
Content - Security - Policy : default - src ' self ' Content - Type : text / html ; charset = utf -8 Date : Thu ,02 Nov 2017e7:25:06 GN Т X - Content - Type - Options nosniff
X - Powered - By : Express Т Request Headers view source l
Accep : text / css ,*/*; q =0.1
Accept - Encoding : gzip , deflate , br Accept - Language : zh -CN , zh ; q =0.8 Cache - Control : no - cache
Connection : keep - alive
Cookie : Webstorm -d72faba3=a17f2751-2134-4c24-b421-09f38253ed08;_ ga =GA1.1.955293078.1496989396;_ gid =GA1.1.123728522509540292
Host : localhost :3000 Pragma : no - cache
Referer :http://1ocalhost:3000/
User - Agent : Mozilla /5.e( Windows NT 10.0;wOW64) AppleWebKit /537.36(КНТМ L ,1ike Gecke )C5コ e /61.e.316”.1ГА Saf
" version ":"1.0.0"," description ": H ＂," main ":＂ index . js ",＂ scripts ":{＂ test ":" echo \" Error : no test specified \＂&& exit 1",＂ dev ":" webpack - dev - server -- open -- port 3000-- hot "【如果说把这个删了，就是在根本录里面发现直接放了一个dist，虽然看不见，但是有一个。（传统方式）】10 ＂ keywords ":[],11 ＂ author ":ив12 " license ":＂ Isc ",
13 ＂ devDependencies ":{
14 " css - loader ":＂~0.28.7",
15 " file - loader ":HA1.1.5",
16 " html - webpack - plugin ": へ2.30.1",
" less ":HA2.7.3",
调试控制台 1: node
[34]./ src / css / index . SCSs 1.29 kB {}[ built ]+22 hidden odules
Child html - webpack - plugin for " index . html ":
1 asset
[]./ node _ modules /_ html - webpack -plugin2.30.1html- webpack - plugin / lib / loader . js !./ src / index . html 937 bytes }[ built ][1]./ node _ modules /_lodashe4.17.401odash/ Iodash . js 540 kB {}[ built ]
[3]( webpack )/ buildin / module . js 495 bytes {}[ built
webpack : Co Т piled successfully
／项目的 Js 入口文件 console . log (' ok ＇)
iport ＇./ css / index . css '
//如果要通过路径的形式，区引入node-module相关的文件，可以直接省略前面的node-module，这一层目录，直接写包的形式，然后后面跟上具体的文件路径【不写node-modules这一层层目录，默认就会去node-modules存在。】import ＇./ css / index . scss '
import ' bootstrap / dist / css / bootstrap . css '
{ test ：．( ttfleotI svgIwoffIwoff2)$/, use :' url - loader ＇},/／处理字体文件的1oader28调试控制台 1: node 色．/ node _ modules /_ css -loader0.28.7css- loader !./ node modules /_ boots @./ node _ modules /_bootstrap3.3.7 bootstrap / dist / css / bootstrap . CSs 0./ src / main . js
0multi./ node П odules / webpack - dev -server2.9.3 Child html - webpack - plugin for " index . htnl ":
ASSet Size Chunks Chunk Names
521b5cfd6Зac2d808d5a. hot - update . json 44 bytes [ emitted ]
+1hidden asset 4modules
webpack : Failed to compile .终止批处理操作吗（ Y / N )? Y
>01.webpack- study ê1.0.0dev C :\ Users \ liulongbin \ Desktop \day6＼代码＼01.webpack- study > webpak - dev - server -- open -- port 3000-- hot
