>[success] # loader -- 图片和字体（5.x） 1. **在webpack5之前**，加载这些资源我们需要使用一些**loader**，比如`raw-loader` 、`url-loader`、`file-loader`,但在**Webpack 5开始**上述`file-loader`、`url-loader`、`raw-loader`都并不局限于处理图片，它们还可以被用于加载任意类型的多媒体或文本文件，使用频率极高**Webpack5** 直接内置了这些能力，**开箱即可使用**。 2. 关于使用**webpack5开始**，我们可以直接使用**资源模块类型（asset module type)**,之后只需要通过`module.rules.type`属性指定[资源类型](https://link.juejin.cn/?target=https%3A%2F%2Fwebpack.js.org%2Fguides%2Fasset-modules%2F "https://webpack.js.org/guides/asset-modules/")即可,常见四种 * `asset/resource` 发送一个单独的文件并导出 URL，之前通过使用` file-loader` 实现 * `asset/inline` 导出一个资源的 data URI，之前通过使用 `url-loader` 实现 * `asset/source` 导出资源的源代码，之前通过使用 `raw-loader` 实现； * `asset` 在导出一个 data URI 和发送一个单独的文件之间自动选择，之前通过使用` url-loader`，并且配置资源体积限制实现 3. [Asset Module](https://link.juejin.cn/?target=https%3A%2F%2Fwebpack.js.org%2Fguides%2Fasset-modules%2F "https://webpack.js.org/guides/asset-modules/")的原生支持，让 Webpack 有机会介入这些多媒体资源的解析、生成过程，从而有机会实现更标准、高效的资源处理模型。[`module.rules.type`](https://link.juejin.cn/?target=https%3A%2F%2Fwebpack.js.org%2Fconfiguration%2Fmodule%2F%23ruletype "https://webpack.js.org/configuration/module/#ruletype")已经支持 JSON、WebAssemsbly、二进制、文本等资源类型不仅仅只是图片和文字资源 >[info] ## 使用 * 入口文件代码 ~~~ // 导入图片 import zznhImage from './images/zznh.png' window.onload = function () { const imgEl = document.createElement('img') imgEl.src = zznhImage document.body.append(imgEl) } ~~~ >[danger] ##### asset/resource 默认情况下，`asset/resource`生成的文件会以`[hash][ext][query]`方式重命名，可以通过[output.assetModuleFilename](https://link.juejin.cn/?target=https%3A%2F%2Fwebpack.js.org%2Fconfiguration%2Foutput%2F%23outputassetmodulefilename "https://webpack.js.org/configuration/output/#outputassetmodulefilename")属性控制 ~~~ { test: /\.(png|jpg)$/, type: 'asset/resource', }, ~~~ * 原始图片会被重命名并复制到产物文件夹，同时在代码中插入图片 URL 地址  >[danger] ##### asset/inline ~~~ { test: /\.(png|jpg)$/, type: 'asset/inline', }, ~~~ * 生成一个data URI图片  >[danger] ##### asset 1. 和之前的url`url-loader`处理一样，小于`maxSize`是以 `data URI` 的形式展示 超过`maxSize`值的图片则直，原始图片会被重命名并复制到产物文件夹，同时在代码中插入图片 URL 地址 2. [module.rules.parser.dataUrlCondition](https://link.juejin.cn/?target=https%3A%2F%2Fwebpack.js.org%2Fconfiguration%2Fmodule%2F%23ruleparserdataurlcondition "https://webpack.js.org/configuration/module/#ruleparserdataurlcondition")用于限定文件大小阈值，对标`url-loader`的`limit`属性 ~~~ { test: /\.(png|jpg)$/, type: 'asset', parser: { dataUrlCondition: { maxSize: 60 * 1024, // 6mb }, }, generator: { // 占位符 // name: 指向原来的图片名称 // ext: 扩展名 // hash: webpack生成的hash // 如果加路径前缀 那么就是生成一个指定文件夹例如下面生成一个img路径 filename: 'img/[name]_[hash:8][ext]', }, }, ~~~  >[danger] ##### asset/source 1. 导出资源的源代码，即到处文件信息并且输出展示，这里对能到处的图片指的是`svg`这种 ~~~ module.exports = { // ... module: { rules: [ { test: /\.svg$/i, - use: ['raw-loader'] + type: "asset/source" }, ], }, }; ~~~ 2. 创建一个`.txt`后缀的文本文件，设置`type`为`asset/source`，在`index.js`里面导入该文本并插入在`body`中，即将其当成资源显示在页面上  >[info] ## 对一些配置属性讲解 1. `[hash][name][query]` 这三个配置意思 * `[ext]`： 处理文件的扩展名； * `[name]`：处理文件的名称； * `[hash]`：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）； 2. 自定义文件的输出路径和文件名 * 修改output，添加`assetModuleFilename`属性，`output.assetModuleFilename`来修改此模板字符串，默认是`[hash][ext][query] `组合可以自行修改成其他  * 在`Rule`中，添加一个`generator`属性，并且设置`filename`  注意`generator 的优先级高于 assetModuleFilename` >[info] ## 参考 概念性质参考上一个章节 **loader -- 图片和字体（4.x）** [Webpack5 核心原理与应用实践](https://juejin.cn/book/7115598540721618944)