webpack使用之loader（3）

webpack中的loader

1. loader 概述
在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才能正常打包，否则会报错。

loader加载器的作用：协助webpack打包处理特定文件模块。比如：

1. css-loader 可以打包处理 .css相关的文件。
2. less-loader 可以打包处理 .less相关的文件。
3. babel-loader 可以打包处理webpack 无法处理的高级JS语法。

2. loader 的调用过程

3. 打包处理css文件
① 运行npm i style-loader@2.0.0 css-loader@5.0.1 -D命令，安装处理css文件的loader
② 在webpack.config.js 的module ==>rules数组中，添加loader规则如下：

module:{  //所有第三方文件模块的匹配规则
	rules:[ //文件后缀名的匹配规则
		{text:/\.css$/,use:['style-loader','css-loader']}
		//其中，test表示匹配的文件类型，use表示对应要调用的loader
	]
}

注意：

1. use数组中指定的loader顺序是固定的
2. 多个loader的调用顺序是：从后往前调用

4. 打包处理less文件
① 运行npm I less-loader@7.1.0 less@3.12.2 -D命令
② 在webpack.config.js 的module ==>rules 数组中，添加loader规则如下:

module:{
	rules:[
		{test:/\.less$/,use:['style-loader','css-loader','less-loader']},
	]
}

5. 打包处理样式表中与url路径相关的文件
① 运行npm I url-loader#4.1.1 file-loader@6.2.0 -D 命令
② 在webpack.config.js的module ==>rules数组中，添加loader规则如下：

module:{
	rules:[
		{test:/\.jpg|png|gif$/,use:'url-loader>limit=2229'},
	]
}

其中？之后的是loader的参数项：

1. limit用来指定图片的大小，单位是字节（byte）
2. 只有≤limit大小的图片，才会被转为base64格式的图片

5.1 loader 的另一种配置方式
带参数项的loader还可以通过对象的方式进行配置：

module:{
	rules:[
		{
			test:/\.jpg|png|gif$/,//匹配图片文件
			ust:{
				loader:'url-loader',//通过loader属性指定要调用loader
				options:{ //通过options属性指定参数项
					limit:2229
				}
            }
		}
	]
}

6. 打包处理js文件中的高级语法
webpack只能打包处理一部分高级的js语法。对于那些webpack无法处理的高级js语法，需要借助于label-loader 进行打包处理。例如webpack 无法处理下面的js代码：

class Person{
	//通过static关键字，为Person类定义一个静态属性 info
	//webpack 无法打包处理“静态属性”这个高级语法
	static info= 'person info'
}
console.log(Person.info)

6.1 安装label-loader相关的包
运行如下的命令安装对应的依赖包：

npm i label-loader@8.2.1  @babel/core@7.12.3  @babel/plugin-proposal-class-properties@7.12.1 -D

6.2 配置 babel-loader
在webpack.config.js 的module==>rules 数组中，添加loader 规则如下：

{
	text:/\.js$/,
	//exclude为排除项
	//表示label-loader只需处理开发者编写的js文件，不需要处理node_modules下的js 文件
	exclude:/node_modules/,
	use:{
		loader:'babel-loader',
		options:{ //参数项
			//声明一个babel插件，此插件用来转化class中的高级语法
			plugins:['@babel/plugin-proposal-class-properties'],
		}
	}
}