Vue学习杂记（五）——loader的使用

引言：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编码