webpack5處理 圖片、字體文件的方式有三種：file-loader? ?url-loader? ?asset

1、首先介紹 file-loader 和 url-loader

????處理兩種圖片：js文件中引入的圖片，css 文件中的背景圖片。

????file-loader 和 url-loader 的配置大同小異，都可以講圖片文件復(fù)制到目標(biāo)目錄，區(qū)別是 url-? ? ? ? loader可以講小于limit的圖片文件轉(zhuǎn)為 base64，這樣小圖就少了一次http請(qǐng)求

1.1css 文件中的背景圖片：

????css-loader 識(shí)別到 background 的 url 背景圖片地址后，會(huì)返回一個(gè)?

????require(圖片地址)，但是，這個(gè)?require 圖片默認(rèn)返回的是一個(gè) esMoudle ，

????所以css-loader需要加個(gè)配置參數(shù)：

1.2 js文件中引入的圖片

??????file-loader 或者 url-loader?的配置：

????js文件中 require 的圖片默認(rèn)是個(gè) exModule ，所以當(dāng)使用這個(gè)圖片的時(shí)候需要這樣：

????或者這樣：

????如果在 file-loader 的配置總加了參數(shù)??esModule: false，就可以直接用：

再介紹?asset

配置：

asset 更靈活的配置

asset 處理字體圖標(biāo)，可以直接配置??type: 'asset/resource' 相當(dāng)于 file-loader，把字體文件拷貝到目標(biāo)目錄：