webpack中的loader介绍与使用

一、loader的定义与作用

定义：加载器，webpack只默认处理js后缀名的文件，其他文件的打包则需要调用loader加载器。
作用：协助webpack打包处理特定的文件模块；例如css-loader、less-loader、babel-loader(打包处理webpack无法处理的高级js语法)，即打包其他类型的文件。

二、loader打包处理文件

1.loader打包处理css文件

（1）导入css，得到css文件

import  'css文件路径'

（2）运行如下命令

npm i style-loader@3.0.0 css-loader@5.2.6 -D

（3）在webpack.config.js的module->rules数组中，添加loader如下：

module:{
	rules:[
		//定义了不同模块对应的loader
		{test:/\.css$/,use:['style-loader','css-loader']}
	]
},

laoder处理是从后往前，所以会先进行css-loader处理之后，在转交给style-loader处理，所以css-loader写在后面，style-loader写在前面

2.loader打包处理less文件

（1）导入less，得到less文件

import 'less文件路径'

（2）运行如下命令

npm i less-loader@10.0.1 less@4.1.1 -D

（3）在webpack.config.js的module->rules数组中，添加loader如下：

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

3.loader打包处理样式表与URL路径相关的文件

（1）导入图片文件，得到图片文件

import logo from '路径'

（2）给img标签的src动态赋值

$('.box').attr('src',logo)

（3）运行如下命令

npm i url-loader@4.1.1 file-loader@6.2.0 -D

（4）在webpack.config.js的module->rules数组中，添加loader如下：

module:{
	rules:[
	//?后为loader的参数项，可以不用
		{test:/\.jpg|.png|.gif$/,use:'url-loader?limit=22229'}
	] 
},

？是跟的参数，多个参数使用&分开；
limit是用来指定图片的大小，单位是字节（byte）；
只有<=limit大小的图片，才会被转为base64格式的图片。

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

使用babel-loader
（1）运行如下命令

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

（2）在webpack.config.js的module->rules数组中，添加loader如下：

module:{
	rules:[
	//?后为loader的参数项，可以不用
		{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
	] 
},

exclude：在配置babel-loader时，只需要把自己的代码进行转换，一定要排除node_modules里的js。
（3）创建babel.config.js的配置文件
定义babel的配置项如下：

module.exports = {
	"plugins": [
    	["@babel/plugin-proposal-decorators", { "version": "legacy" }],
    	"@babel/plugin-proposal-class-properties"
    ]
}

可参考官方文档进行配置，网址如下：
https://babeljs.io/docs/en/babel-plugin-proposal-decorators