3.Webpack的loaders（二）

一、加载图片资源

file-loader（webpack5已弃用）

在项目中使用图片一般有两种方式：①比如想给一个div设置一个背景：background-image：url() ②通过img标签里面的src属性

 

 直接npm run build就可以展示出来，不需要file-loader：

 

 

url-loader（webpack5已弃用）

但是我还是想自定义输出以及文件名怎么办呐？

 

 这样写就可以啦！

 

 

 显示不了：

 

 无法根据相对路径找到对应的图片。

 

 这样就可以了：

 

 总结一下：在webpack5之前，加载这些资源需要使用一些loader，比如raw-loader、url-loader、file-loader；

在webpack5开始，直接使用资源模块类型（asset module type），来替代上面的loader。

 

 

 

 

 

 

 

 二、加载字体资源

 

 在webpack5中直接打包就会成功。因为我们之前已经配置了asset/inline，可以看看打包后的代码：

 

 我肯定不想打包在image里面：