注意：webpack默认只能打包处理JS类型的文件，无法处理非JS类型文件 如果要处理 非JS类型文件，需手动安装合理的 第三方 loader加载器
一、安装loader操作
1、如果需要打包处理 css文件，需手动安装
cnmp i style-loader css-loader -D
2、打开webpack.config.js这个配置文件，在里边新增加一些配置节点，叫做module，它是一个对象，在这个对象身上，有一个rules属性，这个rules属性是一个数组，在这个数组中，存放了第三方文件的匹配和处理规则
module: {
rules: [
{test: '/.\css$/',use: ['style-loader','css-loader']} //这是配置处理.css文件的第三方loader规则，处理的顺序是从后往前调用
]
}
注意：webpack 处理第三方文件类型的过程：
1、发现这个 要处理的文件不是 JS文件，然后就去 配 置文件中，查找有没有对应的 第三方 loader 规则。
2、如果能找到对应的规则，就会调用 对应的loader处理这种文件类型。
3、在调用loader的时候，是从后往前调用的
4、当webpack 拿到配置对象后，就拿到了配置对象中，指定的 入口和出口，然后进行打包构建
二、配置处理less、sass文件的loader
1、在css文件中新建一个less文件，在main.js中引入
import './css/index.less';
2、安装less和less-loader，sass-loader和node-sass
cnpm install less -D
cnpm install less-loader@4.1.0 -D
cnpm install sass-loader@7.0.1 -D
cnpm install node-sass -D
注意：这里需要注意一下，有可能最后打包时候会出现报错，这时可以降低一个less-loader的版本号@4.1.0
报错信息：
image.png
3、在webpack.config.js中配置
module: {
rules: [ //这个rules里的配置可以写在和上边配置css的写在一起
{ test: /\.less$/, use: ['style-loader','css-loader','less-loader']}, // 配置处理 .less 文件的第三方loader 规则
{ test: /\.sass$/, use: ['style-loader','css-loader','sass-loader']} // 配置处理 .scss 文件的第三方loader 规则
]
}
三、配置处理url-loader(图片)
1、在css文件中引入图片路径
🌰：
.box{
width: 200px;
height: 150px;
background: url('../images/老李.jpg');
background-size: cover;
}
2、安装url-loader和file-loader文件
cnpm install/i url-loader file-loader -D //因为file-loader是url-loader内部依赖，所以配置文件中不用配置
3、在webpack.config.js中配置处理
module: {
rules: [
{ test: /\.(jpg|jpeg|png|gif|bmp)$/, use: ['url-loader?limit=number'] // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的图片， 大于或等于limit值，则不会被转为base64格式，如果小于，图片则被转为base64的字符串值
]
}
//当引入不同文件中相同名字的图片时，webpack打包的时候，会默认覆盖，显示几张相同的图片
module: {
rules: [
{ test: /\.(jpg|jpeg|png|gif|bmp)$/, use: ['url-loader?limit=number&[hash:8]-name=[name].[ext]'] // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的图片， 大于或等于limit值，则不会被转为base64格式，如果小于，图片则被转为base64的字符串值
]
}
limit=number&[hash:8]-name=[name].[ext]解释
number:图片的大小，字节数值，1kb = 1024字节
[hash:8]-name=[name].[ext]：为了解决不同目录中，有相同名字的图片正常显示
