介绍：
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的值，如第一步）
网友评论