3. webpack 处理文件资源

file-loader

file-loader 可以处理 import/require() 方式引入的一个文件资源，并且将其放到输出的文件夹中。
安装npm install file-loader -D
打包之后的文件名称是 md4 加密之后的。如果对比打包前后的文件，处理后的文件名称按照一定的规则进行显示：保留原来的文件名、扩展名，同时为了防止重复，包含一个hash值。 常用的 placeholder

• [ext]： 处理文件的扩展名。
• [name]：处理文件的名称。
• [hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）
• [contentHash]：在file-loader中和[hash]结果是一致的（在webpack的一些其他地方不一样，后面会讲到）
• [hash:]：截图hash的长度，默认32个字符太长了
• [path]：文件相对于webpack配置文件的路径

      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: "img/[name].[hash:6].[ext]",
              // 输出文件存放路径
              outputPath: "img"
            }
          }
        ]
      }

url-loader

url-loader 和 file-loader 的工作方式相似，使用了 url-loader 之后就不需要 file-loader了。 url-loader 可以将文件，转成 base64 的 URI。设置了 limit 之后，可以将小的图片设置为base64。
原则：小的图片转换base64（和页面一起请求，减少不必要的请求），大的图片要进行转换，反而会影响页面的请求速度，直接再次发送请求。
安装：npm install url-loader -D

      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: "img/[name].[hash:6].[ext]",
              // 小于 100 kb会转换为 uri，大于的不转换
              limit: 100 * 1024,
              outputPath:"img"
            }
          }
        ]
      }

asset module type

webpack5 之前，加载资源需要使用一些loader，比如raw-loader 、url-loader、file-loader，但是在 webpack5 之后可以直接使用资源模块类型(asset module type)，来替代上面的这些loader。
asset module type 通过添加 4 种新的模块类型，来替换所有这些 loader

• asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现

            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                type: "asset/resource",
                generator: {
                    // 输出路径和文件名
                    filename: "img/[name].[hash:6][ext]"
                }
            }

• asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现
• asset/source 导出资源的源代码。之前通过使用 raw-loader 实现
• asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源 体积限制实现

            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                type: "asset",
                // 输出路径和文件名
                generator: {
                    filename: "img/[name].[hash:6][ext]"
                },
                parser: {
                    dataUrlCondition: {
                        maxSize: 100 * 1024
                    }
                }
            }

处理字体图标

      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        }
      }

type: "asset/resource"和type: "asset"的区别：

1. type: "asset/resource" 相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理
2. type: "asset" 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式