引言:loader其实也是webpack系列的内容,考虑到webpack涉及知识点较多,因此分成两篇。
一、什么是loader?
loader其实可以理解成webpack一个增强工具。webpack只能加载js,并且对于比较高级的ES7、ES8语法或者较新的react插件中使用的语法,webpack同样无能为力,需要使用loader系列中的babel来处理。一句话,你可以把loader理解成一个类似于webpack处理js的、能够处理css、less、jpg等多种前端需要用到的资源的工具。
二、loader处理css
首先需要明白一点,在webpack里面,像css、jpg等都可以被称为模块,至于这些模块的加载,只要先后逻辑顺序没有问题,可以放到任何js文件中交给webpack作打包处理。
安装与样式处理有关的loader:
npm i style-loader@3.0.0 css-loader@5.2.6 -D
安装完成之后,需要在webpack.config.js的module.exports中新增如下代码:
module:{
rules:[
{
test:/\.css$/,use:['style-loader','css-loader']
//\用来转义,$表示以什么结尾(也就是匹配文件后缀)
}
]
}
说明:webpack对于代码处理当遇到css文件的时候,会先去查找是否安装了处理css的loader,如果没有直接报错,如果有,则先使用最后一个loader,然后使用逐渐向前使用直到使用完所有与之匹配的loader。例如,我们在index.js中引入index.css,由于webpack看到后缀不是js,于是会进入module的rules
中进行正则匹配,如果通过了test
正则规则,那么便从最后一个开始
调用user
数组里面的loader
,依次调用完这些loader对代码进行打包处理。
我们知道,css里面除了有.css文件,还有预编译的less文件。less其实和css差不多,less在使用上最大的特点是:能够嵌套使用css
(就省得写一堆选择器了),举个例子:
less与css相比,less不仅能够嵌套使用样式选择器,降低各个选择器之间的耦合性
,而且还封装对浏览器语法差异处理。但是,不足的是less属于一种预编译
的css,实际使用时需要进行编译,这无疑增加了服务器的开销
。说了这么多,咱就直接使用吧:
安装处理less的loader,并在module中添加相应规则:
npm i less-loader@10.0.1 less@4.1.1 -D
test:/\.less$/,use:['style-loader','css-loader','less-loader']
//再一次照应了前面提到的预编译和loader数组从最后开始使用,其次less是一个内置依赖项
三、loader处理图片
我们知道,图片的引入是利用src属性实现的,而src中其实又包含有路径引入和base64引入。
可能你忘记了前端对于图片的取舍处理,图片处理大概有三种方法:什么都不处理的url请求
、图片转base64
、雪碧图
。其中雪碧图和base64的想法一致,减少向服务器的请求次数优化性能。雪碧图
,将多个小图片强行拼接成一个图片,请求时只需要请求一次,然后根据位置和大小设置扣除想要使用的那张图。base64
,根据图片的数据传输,直接将图片解码放到src中,就不需要请求了。
取舍关键之处:base64转码之后,得到的字符串比实际图片文件大小还大,也就是增加了内存。除此之外,还影响到CSSOM
(css对象模型,有点类似于DOM,但只针对于css)的生成,在页面渲染时,base64会进入到css文件中,直接导致css文件增大,导致CSSOM生成时间增加,而CSSOM阻止任何东西渲染(简单来说就是CSSOM没有生成页面不会展示任何内容),导致页面可能存在一段较长时间的空白。主要是用与比较小的logo或者简单的icon类的图片
。取舍的时候需要考虑到网速、服务器压力、用户体验等。
好,回到loader上来,首先安装与图片相关的loader依赖:
npm i url-loader@4.1.1 file-loader@6.2.0 -D
//file-loader是url-loader的一个依赖项
接下来,同样新增对应规则:
test:/\.jpg|png|jpeg|gif$/,use:['url-loader?limit=3000']
说明:limit
用来传递参数,如果图片大小<=3000字节,给定图片会被转化成base64
数据,否则会返回本地服务器url。
使用举例如下:
import tempImg from './images/t018a08fa7505a91e6e.jpg';
//tempImg在import之后返回base64的字符串
$(".img").attr('src',tempImg);
注意:
这里使用的路径不能是网络路径。
四、loader处理高级的js语法
这里给出一个js的装饰器语法,主要是为了介绍使用babel-loader插件,至于语法本身可以先不用深究,给出例子:
解决方法:
npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
然后同样在配置文件中添加对应规则:
test:/\.js$/,use:['babel-loader'],exclude:'/node_modules/'
说明:exclude参数表示的是排除指定目录下的js文件,因为node_modules本身就是封装好的代码,我们只需要处理自己写的代码,这样也能提交加载效率。
当然,除了配置这个,还不够,需要添加一个babel.config.js的配置文件,并添加如下内容:
module.exports={
"plugins": [["@babel/plugin-proposal-decorators",{legacy:true}]]
}
webpack对于JS高级语法的兼容处理,需要根据具体的语法类型配置babel.config.js。目前只需要知道对于高级语法webpack也可能无法处理,如果要做兼容需要用到babel-loader。
参考文献
(1)【前端攻略】:玩转图片Base64编码