webpack 中的 loader
1.loader概述
在实际开发过程中，webpack默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错
loader加载器的作用：协助webpack打包处理特定的文件模块。比如：
- css-loader 可以打包处理 .css 相关的文件
- less-loader 可以打包处理 .less 相关的文件
- babel-loader 可以打包处理 .webpack 无法处理的高级JS语法
2.loader 的调用过程
3.打包处理css文件
1. 运行命令安装处理css文件的loader:
```
npm install style-loader css-loader -D
```
2. 在webpack.config.js的module -> rules 数组中，添加loader规则：
```
module: { // 所以第三方模块的匹配规则
rules: [ // 文件后缀名的匹配规则
{test : /.css$/, use : ['style-loader', 'css-loader']}
]
}
```
其中，test表示匹配的文件类型，use表示对应要调用的loader
注意：
- use数组中指定的loader顺序是固定的
- 多个loader的调用顺序是：从后往前调用
4.打包处理 less 文件
1. 运行命令安装处理less文件的loader:
```
npm install less-loader less -D
```
2. 在webpack.config.js的module -> rules 数组中，添加loader规则：
```
module: { // 所以第三方模块的匹配规则
rules: [ // 文件后缀名的匹配规则
{test : /.less$/, use : ['style-loader', 'css-loader', 'less-loader']}
]
}
```
5.打包处理样式表中与uri路径相关的文件
1. 安装命令：
```
npm i url-loader file-loader
```
2. 在webpack.config.js的module -> rules 数组中，添加loader规则：
```
module: { // 所以第三方模块的匹配规则
rules: [ // 文件后缀名的匹配规则
{test : /.jpg|png|gif$/, use : 'url-loader'}
]
}
```
其中 ？ 之后的是loader的参数项：
- limit用来指定图片的大小，单位是字节(byte)
- 只有 <= limit大小的图片，才会被转为base64格式的图片
3. loader的另一种配置方式
带参数项的loader还可以通过对象的方式进行配置：
```
module: { // 所以第三方模块的匹配规则
rules: [ // 文件后缀名的匹配规则
{test: /.jfif|png|jpg|gif$/, use: {
loader: "url-loader",
options: {
limit: 100857
}
}
}
]
}
```
6.打包处理js文件中的高级语法
webpack只能打包处理一部分高级的JavaScript语法对于那些webpack无法处理的高级js语法，需要借助babel-loader进行打包处理。例如webpack无法处理下面的JavaScript代码：
class Person {
// 通过static 关键字，为Person类定义了一个静态属性 info
// webpack 无法打包处理“静态属性”这个高级语法
static info = 'person info'
}
console.log(Person.info)
1. 安装babel-loader相关的包
```
npm i babel-loader @babel/core @babel/plugin-proposal-class-properties
```
2. 配置 babel-loader
在webpack.config.js的module -> rules 数组中，添加loader规则：
```
`{
test: /.js$/,
// exclude 为排除项
// 表示 babel-loader 只需处理开发者编写的js文件，不需要处理node_modules下的js文件
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: { // 参数项
// 声明一个babel插件，此插件用来转化class中的高级语法
plugins:[' @babel/plugin-proposal-class-properties']
}
}
}`
```
