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