(掌握)webpack对图片资源的基本处理

(掌握)webpack对图片资源的基本处理

加载图片案例准备

• 为了演示我们项目中可以加载图片，我们需要在项目中使用图片，比较常见的使用图片的方式是两种：
  • img元素，设置src属性
  • 其他元素（比如div），设置background-image的css属性

const zznhImage = new Image()//创建一个image元素
zznhImage.src = zznhImg;

element.appendChild(zznhImage);

//3.增加一个div用来存放图片
const bgDiv = document.createElement('div')
bgDiv.style.width = 200 + 'px'
bgDiv.style.height = 200 + 'px'
bgDiv.style.display = 'inline-block'
bgDiv.className = 'bg-image'
bgDiv.style.backgroundColor = 'red'
element.appendChild(bgDiv)

认识asset module type

• 我们当前使用的webpack版本是webpack5：

  • 在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader
  • 在webpack5开始，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader

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

  • asset/resource 发送一个单独的文件并导出 URL

    之前通过使用 file-loader 实现

    asset/resource = 资产里的资源

  • asset/inline 导出一个资源的 data URI

    之前通过使用 url-loader 实现

  • asset/source 导出资源的源代码(不常用)

    之前通过使用 raw-loader 实现

  • asset 在导出一个 data URI 和发送一个单独的文件之间自动选择

    之前通过使用 url-loader，并且配置资源体积限制实现

//引入图片模块，现在已经不再使用loader的方式来执行这些部分了，以前是使用file-loader。现在新版本使用处理还可能报错。但现在webpack已经内置如何处理文件了。但如果你直接运行还是会报错的，因为webpack将所有图片格式的文件也当作了js模块去处理了，毕竟webpack也不知道怎么去处理，需要我们去告诉webpack
imports zznhImage form "./xxx/你的图片地址"

//image元素
//const imgEl = document.createElement('img')

asset module type的使用

• 比如加载图片，我们可以使用下面的方式：(没错，我们要来处理图片了，要告诉webpack怎么去做)

{
  test:/\.(img|svg|ipg|jpe?g|gif)$/ //识别各种图片的后缀格式，让webpack找到这些文件
  type:"asset/resource"//告诉webpack这是资源类型，将找到的这些文件当作资源类型处理(资源类型是什么在上面有写出来)
}

• 但是，如何可以自定义文件的输出路径和文件名呢？

  • 方式一：修改output，添加assetModuleFilename属性

    好处举例：这样自己制定规则就可以防止，打包后的图片文件名字跟原来的文件名字已经牛头不对马嘴，完全对不上了。你可以自己设定容易让自己区分的规则来打包。但一般很少在这里配置，我们一般采用第二种配置方法

  • 方式二：在Rule中，添加一个generator属性，并且设置filename

  

  • 我们这里介绍几个最常用的placeholder：

    • [ext]： 处理文件的扩展名(后缀名，比如.svg，.js，.html之类的)

    • [name]：处理文件的名称(原来图片的名字)

    • [hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）

      哈希值最好保存下来，哈希值是唯一的，防止图片不小心重复，[hash:6]就是只使用前6位哈希值(基本上也够用了)

      最前面写上img/，就会自己生成一个img文件夹，然后将图片放进去