hello大家好,本节课要讲解的内容是如何使用webpack加载css。上节课已经讲解了loader的概念和基本用户,今天我们来用loader处理图片。
首先先安装对应的loader:
- file-loader
- 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
本节课的内容就到这里
如果你有所帮助的话,请点个赞吧!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。