hello大家好，本节课要讲解的内容是如何使用webpack加载css。上节课已经讲解了loader的概念和基本用户，今天我们来用loader处理图片。
首先先安装对应的loader：
- file-loader
- url-loader
执行命令行 npm install flie-loader url-loader -D
然后找一张图片放到src目录下面，随后修改代码，import对应的图片，创建一个img标签，img的src指向引用即可
屏幕快照 2020-03-13 22.45.50.png
然后运行npm run build
查看运行页面
屏幕快照 2020-03-13 23.00.48.png
file-loader做了什么呢，file-loader将文件移动到输出文件夹，并返回（相对）URL
然后我们来讲解另一个loader:url-loader
url-loader是在file-loader的基础上封装的，如果使用url-loader遇到问题的时候，可以先查看一下是否已经安装了file-loader。它像 file loader 一样工作，但如果文件小于我们规定的某个值，可以返回 data URL。这个时候呢，我们需要改一下loader的写法，只是用双引号的这种写法是简略的写法，这种写法会使用loader的默认配置。现在我们需要对loader进行手动配置，那么应该这么写
{
loader:'url-loader',
options:{}
}
loader对应的loader名称，options对应的配置项对象，我们在配置项里对应的配置
{
loader:'url-loader',
options:{
limit:1024*100
}
}
当图片不大于100kb时会被转换成data URL。如果图片大于100kb时，url-loader会默认使用file-loader来处理文件。
我们来引用另一张图片，
屏幕快照 2020-03-13 22.56.49.png
然后执行npm run build
查看页面，F12
屏幕快照 2020-03-13 22.59.15.png
本节课的内容就到这里
如果你有所帮助的话，请点个赞吧！
