⭐webpack5开发指南（二）如何加载资源

前言

🍍我们都知道webpack可以帮助我们打包js文件，那么webpack又是如何加载除了js以外的资源的呢？ png格式、base64格式、txt内容等不同格式又是如何引入并解析的呢？今天我们就接着上一篇文章来看一下webpack的资源模块✅。

二、资源模块

在webpack出现之前，前端一般使用类似Grunt、Gulp等工具处理资源，他们可以将src下的文件资源移动到dist或者build目录当中，webpack可以使用内置的资源模块来引入除了js以外的其他类型资源，内置的资源模块即asset modules,它是一种模块类型，webpack可以使用asset modules对字体文件等资源进行打包，资源文件类型则成为asset module type,会通过四种资源模块来替换loader。

四种资源模块：

资源模块	特点	典型示例
asset/resource	发送单独的文件并导出url	引入一个png资源
asset/inline	会导出资源的data url	引入一个svg资源 base64格式
asset/source	会导出资源的源代码	引入一个txt文本资源
asset(通用资源类型)	自动选择发送单独的文件或者导出资源的data url	同样的jpg文件根据文件大小 自动选择

四种资源模块的特点可能比较抽象，我们可以通过以下示例来观察并且理解他们的不同。

2.1 resource资源

修改webpack.config.js配置，添加module属性，添加rules,rules为数组，可以增添很多规则，使用test属性进行正则匹配png格式图片，同时设置type为asset/resource。

module.exports={
   module:{
        rules:[
            {
                test:/\.png$/,
                type:'asset/resource'
            }
        ]
    }
}

修改webpack.config.js配置后，我们在src/assets放置图片资源，在index.js中进行引用并添加到页面，执行npx webpack打包。 执行npx webpack打包后我们会发现dist目录中已经帮我们引入了一个随机命名的图片。 我们此时可以打开页面，可以看到图片已经被展现在页面上，并且img的src即为dist下的文件。 我们可以看到dist目录下的img命名是随机的，那么我们是否可以自定义文件夹及命名呢，当然是可以的，有两种方式：

1. webpack.config.js的output中新增assetModuleFilename属性，images代表资源放置的文件夹，contenthash这里可以使用固定命名，但是我们资源很多情况下需要webpack自动命名，contenthash可以按照内容进行hash命名，ext表示拓展名。

  output:{
        assetModuleFilename:"images/[contenthash][ext]"
    },

2. 在rules下新增generator属性，打包效果相同，并且generator优先级高于assetModuleFilename。

 module:{
        rules:[
            {
                test:/\.png$/,
                type:'asset/resource',
                generator:{
                    filename:'images/[contenthash][ext]'
                }
            }
        ]
    }

2.2 inline资源

修改webpack.config.js配置，增添一条新的rule，同时设置type为asset/resource,我们匹配一个svg文件。

module.exports={
   module:{
        rules:[
            {
                test:/\.svg$/,
                type:'asset/inline',
            }
        ]
    }
}

在index.js中使用同样的方式进行引入。

import helloWorld from './hello-world'
import imgsrc from './assets/img3.png'
import svg1 from './assets/svg1.svg'

helloWorld()

const img=document.createElement('img')
img.src=imgsrc
document.body.appendChild(img)

const img2=document.createElement('img')
img2.style.cssText='width:300px;height:300px'
img2.src=svg1
document.body.appendChild(img2)

我们启动页面可以看到我们引入的png格式图片与svg格式的表情都展现了出来，同时我们观察svg的src,是一个data url，即base64格式。

2.3 source资源

修改webpack.config.js配置，增添一条新的rule，同时设置type为asset/source,我们匹配一个txt文件。

module.exports={
   module:{
        rules:[
           {
                test:/\.txt$/,
                type:'asset/source',
            }
        ]
    }
}

在index.js中使用同样的方式进行引入。

import txt1 from './assets/txt1.txt'

const txt=document.createElement('div')
txt.textContent=txt1
document.body.appendChild(txt)

我们启动页面可以看到我们引入的txt文档成功渲染。

2.4 asset 通用资源类型

通用资源类型在导出一个data url和导出一个单独文件之间做出选择 修改webpack.config.js配置，增添一条新的rule，同时设置type为asset,我们匹配一个jpg文件。

module.exports={
   module:{
        rules:[
          {
                test:/\.jpg$/,
                type:'asset',
            }
        ]
    }
}

jpg文件顺利渲染，我们说通用资源类型在导出一个data url和导出一个单独文件之间做出选择，那么现在显然是选择了resource,webpack会根据我们资源的大小进行选择，如果资源大于8k,则会选择resource，如果小于则为inline生成一个base64的链接。那么如何自定义这个大小临界值呢？ 自定义临界值：

使用parser属性设置dataUrlCondition，假设设为4M。

module.exports={
   module:{
        rules:[
          {
                test:/\.jpg$/,
                type:'asset',
                 parser:{
                    dataUrlCondition:{
                        maxSize:4*1024*1024
                    }
                }
            }
        ]
    }
}

重新打包后我们发现，由于当前jpg文件是小于4M的因此他的src是一个base64格式的链接。

总结

webpack为我们提供了四种资源类型来加载除了js以外的资源，根据文件类型的不同设置不同的解析规则，那么webpack就可以成功解析并打包。