webpack4处理图片和字体的loader

file-loader

file-loader的作用是处理webpack中的静态资源文件。File Loader可以将各种类型的文件，如图像、字体、视频等转换为模块并加载到Web应用程序中。它通过import或require语句引入文件资源，并将其放置在输出目录中。

url-loader

url-loader和file-loader的功能类似，但是它有个阈值，当大于设置的阈值时，返回base64编码，否则返回copy后的文件

rules: [
    {
      test: /\.(png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          name: '[name]_[hash:6].[ext]',
          outputPath: 'images/',
          limit: 2048  // url-loader的limit配置项
        }
      }
    }
  ]

webpack5处理图片和字体的loader

webpack5已经将webpack4的file-loader、url-loader内置了，提供了资源模块类型

asset/resource 替换 file-loader(发送单独文件)

asset/inline 替换 url-loader （导出 url）

asset/source 替换 raw-loader（导出源代码）

asset