webpack5之前是通过，file-loader、raw-loader、url-loader处理文件
webpack5是通过使用资源模块类型（asset module type）处理文件
资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：
asset/resource发送一个单独的文件并导出 URL。之前通过使用file-loader实现。asset/inline导出一个资源的 data URI。之前通过使用url-loader实现。asset/source导出资源的源代码。之前通过使用raw-loader实现。asset在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用url-loader，并且配置资源体积限制实现。
一、准备工作
src/index.js添加文件引入
import lv from "../image/lv.jpg";
const img = document.createElement("img");
img.src = lv;
document.body.appendChild(img);import lb from "../image/lb.jpg";
const imgs = document.createElement("img");
imgs.src = lb;
document.body.appendChild(imgs);二、配置webpack
type: 'asset/resource',//单独文件输出
generator: {//配置输出文件路径和名称 img/文件路径 name文件名，hash:6生成6位hash，ext文件后缀
filename: "img/[name].[hash:6].[ext]"
}
{test: /\.(jpg|png)$/,type: 'asset/resource',generator: {filename: "img/[name].[hash:6].[ext]"}} 打包子后文件
type: 'asset/inline',//base64格式输出
{test: /\.(jpg|png)$/,type: 'asset/inline'}
这两种输出的优点和缺点
asset/resource：输出文件减少js文件的体积，但是增加了http的请求数量
asset/inline：将文件打包到js文件中，增加了体积
对于这两种情况，我们可以使用通用资源类型asset，根据文件的大小，将大图片打包到文件里，小的图片打包到js里
我的文件一个是280KB,一个是460KB
type: 'asset'，更具dataUrlCondition文件的大小，输出不同的文件
300 * 1024 就是300KB
{test: /\.(jpg|png)$/,type: 'asset',generator: {filename: "img/[name].[hash:6].[ext]"},parser: {dataUrlCondition: { //条件限制maxSize: 300 * 1024}}}
更加符合我们的实际开发需求
