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参数以下图： 运行结果：