webpack在对项目进行打包时，默认是只能识别后缀名为.js的文件，而且对于js中的一些高级语法也无法进行打包和处理，要想处理如css,less等后缀名文件，我们就要用到loader（加载器）了，
目前使用较多的loader有以下几种：
1.打包处理.css文件
① 首先在终端中运行:
npm i style-loader@3.0.0 css-loader@5.2.6 -D
安装处理.css文件的loader
②在webpack.config,js的module->rules数组中，添加loader规则：
module.exports = {
mode: "development",
module: {
rules: [
{test: /.css$/,use: ["style-loader", "css-loader"]},
]
}
};
其中，test表示匹配的文件类型，use表示对应要调用的loader
注意：
use数组中指定的loader顺序是固定的
多个loader的调用顺序是从后往前调用
[其具体调用规则见](webpack中loader调用过程 - 掘金 (juejin.cn))
2.打包处理.less文件
①在终端中运行
npm i less-loader@10.0.1 less@4.1.1 -D
②在webpack.config.js的module->rules数组中，添加loader规则：
module.exports = {
mode: "development",
module: {
rules: [
{test: /.less$/,use: ["style-loader", "css-loader","less-loader"] }
]
}
};
3.打包处理样式表中与url路径相关的文件
①在终端中运行:
npm i url-loader@4.1.1 file-loader@6.2.0 -D
②在webpack.config.js的module->rules数组中，添加loader规则：
module.exports = {
mode: "development",
module: {
rules: [
{test:/.jpg|png|gif$/,use:'url-loader?limit=22229'},
]
}
};
其中？之后的是loader的参数项：
limit用来指定图片的大小，单位是字节（byte）
只有<=limit大小的图片，才会被转为base64格式的图片
