webpack使用file-loader，url-loader，asset处理图片，字体文件

webpack5处理 图片、字体文件的方式有三种：file-loader   url-loader   asset

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

    处理两种图片：js文件中引入的图片，css 文件中的背景图片。

    file-loader 和 url-loader 的配置大同小异，都可以讲图片文件复制到目标目录，区别是 url-        loader可以讲小于limit的图片文件转为 base64，这样小图就少了一次http请求

1.1css 文件中的背景图片：

    css-loader 识别到 background 的 url 背景图片地址后，会返回一个 

    require(图片地址)，但是，这个 require 图片默认返回的是一个 esMoudle ，

    所以css-loader需要加个配置参数：

1.2 js文件中引入的图片

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

    js文件中 require 的图片默认是个 exModule ，所以当使用这个图片的时候需要这样：

    或者这样：

    如果在 file-loader 的配置总加了参数  esModule: false，就可以直接用：

再介绍 asset

配置：

asset 更灵活的配置

asset 处理字体图标，可以直接配置  type: 'asset/resource' 相当于 file-loader，把字体文件拷贝到目标目录：