webpck配置资源模块

介绍：

webpack为我们提供了4种资源模块类型，这些资源类型可以用于处理和打包一些资源文件，（如字体，图片）他们的介绍分别如下：

• asset/resource 发送一个单独的文件并导出 URL。
• asset/inline 导出一个资源的 data URI。
• asset/source 导出资源的源代码。
• asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。

asset/resource 资源类型使用：

第一步：先在webpack.config.js文件中配置资源文件

module:{
    rules:[  //设置资源模块导出规则
      {
        test:/\.png$/,   
        type:"asset/resource",  //发送一个单独的文件并导出 URL
      },
  ]
}

第二步：在js中引入之前准备好的png资源图片，并将添加到页面上

// 引入图片资源
import imgSrc from "../assets/img-01.png";
//将图片资源添加到body中
const img = document.createElement("img");
img.src = imgSrc;
document.body.appendChild(img);

同时我们可以在module.rules中设置导出资源的路径及扩展名，我们也可以使用contenthash+ext的写法，contenthash会自动生成一个二进制的hash值，ext会自动生成编译后的扩展名。如下：

image.png

第三步：执行打包命令 npx webpack 并启动服务 npx webpack-dev-server，此时就可以在dist目录下看到打包好的png文件了。

image.png

asset/inline资源类型的使用：

第一步:同理在module.rules中配置资源类型

 {
        test:/\.jpeg$/,   
        type:"asset/inline", //导出一个资源的data URI
  },

第二步：引入准备好的资源文件，并将其添加到页面。

// 引入图片资源
import jpegSrc from "../assets/img-02.jpeg";

const img2 = document.createElement("img");
img2.style.cssText = "height:200px;width:200px";
img2.src = jpegSrc;
document.body.appendChild(img2);

第三步：执行打包命令，并启动服务，此时我们可以在页面上看到我们打包的 img-02.jpeg的图片，在dist目录下并没有img-02.jpeg的图片资源，这是由于使用asset/inline方式对资源进行打包，会生成一个base64编码后的data URL。具体在页面的展示如下：

image.png

asset/source资源类型的使用：

第一步:同理在module.rules中配置资源类型

{
        test:/\.txt$/,   
        type:"asset/source", //导出资源的源代码
},

第二步：引入准备好的资源文件，并将其添加到页面。

// 引入图片资源
import txtContent from "../assets/haha.txt"

const box = document.createElement('div')
box.style.cssText = 'height:200px;width:100px;background:red'
box.textContent = txtContent
document.body.appendChild(box)

第三步：执行打包命令，并启动服务，在dist目录下也并没有生成新的文件，在页面上可以看到我们打包好的文件，如下：

image.png

asset资源类型的使用：

第一步:同理在module.rules中配置资源类型

{
        test:/\.gif$/,
        type:'asset',  //在导出一个资源data URI和发送一个单独的文件并导出URL之间做选择
        parser:{
          dataUrlCondition:{
            maxSize:4*1024*1024
          }
        }
  },

第二步：引入准备好的资源文件，并将其添加到页面。

 // 引入图片资源
import gifSrc from '../assets/img-03.gif'

const img3 = document.createElement('img')
img3.src = gifSrc

第三步：asset，在导出base64的url和发送一个文件并导出url之间做选择，一般默认小于8k才会生成base64的链接，如果大于8k则会发送一个单独的文件并导出url。（这里的8k临界值是可以设置的，设置方式通过添加一个parser.dataUrlCondition.maxSise的值，如第一步）