介绍

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 会自动生成编译后的扩展名。如下：

第三步：执行打包命令 npx webpack 并启动服务 npx webpack-dev-server，此时就可以在dist 目录下看到打包好的 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。具体在页面的展示如下：

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 目录下也并没有生成新的文件，在页面上可以看到我们打包好的文件，如下：

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
    document.body.appendChild(img3)

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