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指向引用便可

而后运行npm run build

查看运行页面

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来处理文件。

咱们来引用另外一张图片，

而后执行npm run build

查看页面，F12

本节课的内容就到这里

若是你有所帮助的话，请点个赞吧！