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文件后，在index.js文件中引入css文件，但是这并不能成功发布，所以需要安装处理css文件的loader.

2.运行npm i style-loader@2.0.0 css-loader@5.0.1 -D命令，安装处理css文件的loader.

3.在webpack.config.js的module→rules数组中，添加loader规则如下：

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

注意：

• use数组中指定的loader顺序是固定的

• 多个loader的调用顺序是：从后往前调用

4.打包处理less文件

1.运行npm i less-loader@7.1.0 less@3.12.2 -D命令

2.在webpack.config.js的module→rules数组中，添加loader规则如下：

module:{//所有第三方文件模块的匹配规则
  rules:[//文件后缀名的匹配规则
    {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
    ]
   }

3.less文件也是一种css文件。

5.打包处理样式表中，与url路径相关的文件

1.运行npm i url-loader@4.1.1 file-loader@6.2.0 -D命令

2.在webpack.config.js的module→rules数组中，添加loader规则如下：

module:{//所有第三方文件模块的匹配规则
  rules:[//文件后缀名的匹配规则
    {test:/\.jpg|png|gif$/,use:'url-loader?limit=22229'},
    ]
   }

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

• limit用来指定图片的大小，单位是字节（byte）

• 只有≤limit大小的图片，才会被转为base64格式的图片

• （主要是因为图片大小，且浏览器打开后会申请一些不必要的请求，导致速度变慢，所以需要引入这个参数来辅助）

5.1 loader的另外一种配置方式

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

module:{//所有第三方文件模块的匹配规则
  rules:[//文件后缀名的匹配规则
     {
                test: /\.jpg|png|gif$/, //匹配图片文件
                use: {
                    loader: 'url-loader', //通过loader属性指定要调用的loader
                    options: { //通过options属性指定参数项
                        limit: 87978
                    }

                }

            },
   ]
}

6.打包处理js文件中的高级语法

webpack只能打包处理一部分高级的javascript语法。对于哪些webpack无法处理的高级js语法，需要借助于babel-loader进行打包处理。例如，webpack无法处理下面的代码：

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

6.1安装babel-loader相关的包

运行如下的命令安装对应的依赖包：

npm i babel-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规则如下：

module:{//所有第三方文件模块的匹配规则
  rules:[//文件后缀名的匹配规则
     {
                test: /\.js$/,
                //exclude为排除项
                //表示babel-loader只需处理开发者编写的js文件，不需要处理node_modules下的js文件
                exclude:/node_modules/,                
                use: {
                    loader: ' babel-loader', //通过loader属性指定要调用的loader
                    options: { //通过options属性指定参数项
                        //声明一个babel插件，此插件用来转化class中的高级语法
                        plugins:['@babel/plugin-proposal-class-properties']
                    }

                }

            },
   ]
}