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

本节课的内容就到这里

如果你有所帮助的话,请点个赞吧!


波罗丁的菠萝
886 声望14 粉丝

深林人不知,明月来相照