Webpack配置-其他资源加载以及处理（图片、字体、文件等）

在 webpack5之前加载资源文件一般会是用 file-loader、url-loader、raw-loader等，但是在webpack5之后可以直接使用资源模块类型（asset module type）来替代上述 loader,本会会先将 webpack5之前的加载方式，以及webpack5之后新加入的加载方式

• 准备工作

  准备两张大小不一的图片资源，我这边准备的是一张56KB的一张图和 11KB的一张图，两张图分别加入到项目中，然后将两张图片显示带页面上之后打包看输出结果
  代码如下： 打包结果如下： 打包会报错提示需要一个合适的 loader去加载此类文件

• file-loader

  file-loader的作用就是帮助我们处理import/require()方式引入的文件资源并且会将它放到我们输出的文件夹中，上文中有提到引入图片资源之后会报错所以此时我们在引入file-loader之后然后再配置完成在打包看结果

  • 安装

    yarn add file-loader -D

  • 配置

    只需要在 webpack中添加一个 rule就行 打包结果： 发现在 build文件夹中多了两个文件，这两个文件就是使用的两个图片，然后再运行发现图片能够正常加载

  • 文件的名称规则以及配置文件名称

    从上文中的打包结果可以看到会将资源文件会被添加到指定的打包文件夹中，并且名称变了变成了一段很长的字符串（这里的字符串是使用MD4的散列函数处理生成的一个hash值），部分公司会要求打包之后的文件名的格式比如需要保留原来的文件名、加上公司前缀、保留扩展名等，这个时候就可以使用 PlaceHolders来完成,关于 PlaceHolders官方文档上有详细的解释： 这里列举一些常用的 PlaceHolders
    • ext:处理文件扩展名
    • name:处理文件名称
    • hash:使用MD4的散列函数处理生成的一个hash值（默认情况下，它是哈希的十六进制摘要）
    • contentHash:指定生成文件内容哈希值的哈希方法。(默认 md4)
    • path:相对于 webpack/config context 的资源路径。
    • hash:<length>:截图hash的长度，默认32个字符 配置方式:
      打包结果：
      

  • 设置文件的存放路径

    • 上文中在设置name的时候前面拼上路径
    • 设置outputPath

• url-loader

  url-loader用法和作用基本上和file-loader是相同的，但是url-loader可以将文件转成成base64的URI。
  • 安装
    yarn add url-loader -D
  • 配置 发现仅仅是将file-loader替换成url-loader能正常打包并且能否正常显示，但是 build文件夹中并没有对应的资源文件，是应为url-loader默认会将图片资源转成 base64编码格式如下图：
  • url-loader的limit 上文提到url-loader会将图片资源默认都转成base64编码格式，这样做有弊端，如果图片特别多的时候或者是图片资源很大的时候整个页面的加载速度就会很慢，所以此时就可以使用 limit来做限制，就是图片资源大于多少的时候就不进行base64编码格式的转换，具体配置如下图： 运行结果：
    发现添加 limit大图不再被转换

• asset module type

  资源模块的4种类型（这里引用的是官方文档的说明）
  • asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
  • asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。
  • asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
  • asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。 配置 同样的添加 rule
  1. 加载图片 配置文件名称和指定路径和上文的 loader差不太多如下图指定文件名称和对应的路径 还一种修改文件路径的方式是通过设置output.assetModuleFilename来修改如图 这里需要注意如果设置了 filename会优先使用 filename的配置
  2. url-loader的limit效果 首先资源类型需要设置成 asset然后在设置 parser.dataUrlCondition.maxSize参数如下图： 运行结果：