03-使用loader加载image

hello大家好，本节课要讲解的内容是如何使用webpack加载css。上节课已经讲解了loader的概念和基本用户，今天我们来用loader处理图片。

首先先安装对应的loader：

1. file-loader
2. 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

本节课的内容就到这里

如果你有所帮助的话，请点个赞吧！