上一篇体验了webpack对css资源的打包解析。下面我们就来看看如何处理项目中常用的图片、字体和文件吧~项目路径如下，在之前分析css资源项目的基础上，部分文件demo├─src│├─css││├─index.css││└─file.css(+)│├─img││├─portrait.png(+)││└─sky.jpg(+)│├─js││├─component.js││└─createElement.js(+)│└─index.js├─index.html├─package.json└─webpack.config.js分别在createElement.js中创建一个div元素设置背景图片，和img选择导入图像链接。//createElement.jsconstimageEl=newImage();constportrait=require("../img/portrait.png");imageEl.src=portrait;document.body.appendChild(imageEl);constdivEl=document.createElement("div");divEl.style.width="200px";divEl.style.height="200px";divEl.className="div-el";document.body.appendChild(divEl);//文件。css.div-el{background:url("../img/sky.jpg")topcenter/100%no-repeat;display:inline-block;}//index.css@import'./file.css';noloaders不能直接通过npmrunbuild编译，会提示没有合适的loader来处理图片资源file-loaderfile-loader是一个loader，可以用来处理图片字体等文件资源，它的处理方式是将资源复制到打包的文件夹中，并重命名。通过npmifile-loader-D安装依赖项并在webpack.config.js中配置，因为file-loader在webpack5环境中已被弃用。要正确处理图像，您需要配置两个属性。esModule:false(EnableCommonJSmodulesyntax)type:"javascript/auto"(停止当前资产模块的处理并重新开始处理，防止资产重复)module.exports={//其他配置省略module:{rules:[{test:/\.(jpe?g|png|gif|svg)$/i,use:[{{loader:"file-loader",options:{//定义复制的文件名，取原文件name+6位哈希值+原文件后缀name:"img/[name]_[hash:6].[ext]",esModule:false,},},],],type:"javascript/auto",},,},};将打包后的js文件导入到dist/img文件夹下的html页面中，通过liveserver就可以看到页面显示的图片了。url-loaderurl-loader是另外一个可以处理图片字体等文件资源的loader，它和file-loader有些区别。file-loader会复制所有资源url-loader只会复制占用空间大的资源。当资源较小时，会通过npmiurl-loader-D安装依赖进行base64编码，在webpack.config.js中配置url-loader和file-loader一样，在webpack5环境下已经弃用，你还需要配置esModule:false,type:"javascript/auto"属性module.exports={//其他配置省略module:{rules:[{{test:/\.(jpe?g|png|gif|svg)$/i,use:[{loader:"url-loader",options:{namename:"[name]_[hash:6].[ext]",//自定义转换Base64资源大小，超过LIMIT会直接复制资源Limit:100*1024,ESMODULE:FALSE,},},],Type:"JavaScript/Auto",},],],};.png为33.2kb，所以portrait.png以base64编码的形式显示，sky.jpg复制到打包后的文件夹img中。资产模块类型在webpack5环境中已弃用。url-loader、file-loader，改用asset模块类型，无需安装依赖，直接在webpack.config.js中配置asset模块类型，有以下类型对应url-loader、file-loader、asset/resourceimplementation和file-loader一样，复制资源asset/inlineimplementation和url-loader一样，自定义复制的资源仍然处理成base64编码的assets。和url-loader一样，根据文件大小自动处理asset模块类型配置会简单一点module.exports={//其他配置省略png|gif|svg)$/i,type:"asset",//重命名复制的资源generator:{文件名：“img/assetmodule.[name][ext]”,},},],},};当type为asset时，直接复制大小为576kb的sky.jpg和大小为33.2kb的portrait.pngResources以上方法也可以处理字体资源。从iconfont中选择图标，保存到自己的项目中，下载到本地。将iconfont.css、ttf、woff文件放入src目录下新增的font文件夹中，在createElement.js中创建label和index.css中引入iconfont样式资源//createElement.jsconstaddIcon=document.createElement("i");addIcon.className="iconfonticon-add";document.body.appendChild(addIcon);constdeleteIcon=document.createElement("i");deleteIcon.className="iconfont";deleteIcon.innerHTML="";document.body.appendChild(deleteIcon);//index.css@import'../font/iconfont.css'使用asset模块类型配置字体资源module.exports={//其他配置省略module:{规则：[{{test:/\.(ttf|woff2?)$/i,type:"asset/resource",generator:{filename:"font/[name]_[hash:6][ext]",},},],},};两个小图标可以在页面上显示音频和视频其他资源如frequency也可以通过file-loader、url-loader、assetmoduletype进行处理，亲测有效~以上就是图片、字体等文件资源的处理方式。更多关于webpack的内容可以参考我的其他博文。继续更新~
