8. asset module type 加载文件

        在webpack5之后，可以直接使用资源模块类型（asset module type），来替代 raw-loader 、url-loader、file-loader。

        资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader

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

            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                type: "asset/resource"
            }

• 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]",
        }
      }