一、说明
- loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack的打包能力，对它们进行处理。
- webpack默认只能打包JS文件，也无法处理css文件中的url地址，图片、字体库等url地址。需要手动安装一些合适的第三方loader加载器（否则会报需要合适loader...去处理的错）。
- 在webpack配置文件中（webpack.config.js），新增一个配置节点module，是一个对象；有个rules属性，是个数组；数组中存放了所有第三方文件的匹配和处理规则。
- webpack打包时遇到非JS文件，不会直接报错，而是先去找配置文件module节点，找是否有匹配此文件的规则，有即调用对应loader处理。
- loader调用顺序从后往前，后面处理结果交给前面loader继续处理，最终输出到输出文件。
二、处理 css样式表
1、创建了.css文件，如果直接在html中link标签引入，则会造成二次请求，不推荐。
此时，在main.js项目JS入口文件中导入CSS样式表。
import './css/index.css'
2、安装
项目根路径，npm i style-loader css-loader -D 本地安装。处理css文件需要安装 style-loader 和 css-loader 。
3、增加匹配规则
module.exports = {
module:{ //此节点用于配置所有第三方模块加载器
rules:[ //所有第三方模块的匹配规则
{
test:/\.css$/, //正则
use:['style-loader','css-loader'] //匹配到则使用这些第三方loader
}
]
}
}
三、处理less文件
1、在main.js项目JS入口文件中导入less文件。
import './css/index.less'
2、安装
npm i less-loader -D本地安装。此加载器需要依赖less插件npm i less -D（内部依赖，不需要定义到配置文件）。
3、增加匹配规则
less也属于样式，也需要经过style-loader 和 css-loader处理。
module.exports = {
module:{ //此节点用于配置所有第三方模块加载器
rules:[ //所有第三方模块的匹配规则
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
}
]
}
}
四、处理scss文件
1、在main.js项目JS入口文件中导入less文件。
import './css/index.scss'
2、安装
npm i sass-loader -D本地安装。此加载器需要依赖node-sass，cnpm i node-sass -D（常用cnpm安装，npm很多时候失败，内部依赖，不需要规则配置，npm uninstall node-sass出错先删除）。
3、增加匹配规则
sass也属于样式，也需要经过style-loader 和 css-loader处理。
module.exports = {
module:{
rules:[
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
}
]
}
}
五、处理CSS中的url地址（图片、字体库）
1、css中引入了图片url；npm i boostrap -S安装bootstrap的包（根据提示安装其他依赖），4.x版本icon文件分离出去所以还需要下载open-iconicnpm i https://github.com/iconic/open-iconic.git -D，main.js入口文件引入bootstrap.css（4+还需要引入icon），编译会显示无法处理.ttf等字体文件。
//通过路径形式引用node_modules中相关文件，可以省略路径前面node_modules这一层目录
//直接写包的名称，后面跟上具体的文件路径
import 'bootstrap/dist/css/bootstrap.css'
import 'open-iconic/font/css/open-iconic-bootstrap.css'
2、安装
npm i url-loader -D本地安装。此加载器需要依赖file-loader，npm i file-loader -D（内部依赖，不需要规则配置）。
3、增加匹配规则
module.exports = {
module:{
rules:[
{
test:/\.(jpg|png|gif|bmp|jpeg)$/, //匹配图片
use:'url-loader'
},
{
test:/\.(ttf|eot|svg|woff|woff2)$/, //字体文件
use:'url-loader'
}
]
}
}
处理图片和字体引用url虽然用同样的loader，为了区分，匹配规则最好不要混写。
4、编译打包的图片url是base64格式的字符串。
不需要图片的二次请求，适合小的图片。
引用loader时可传参进行控制（格式和url传参一样，只是参数名称是固定的）。
- 如果是大的图片不需要做转换，
rules:[
{
test:/\.(jpg|png|gif|bmp|jpeg)$/,
use:'url-loader?limit=39083'
}
]
limit限制参数，以byte为单位。大于图片本身大小，会转为base64字符串；小于等于，不会被转base64。
- 默认图片名字会重命名，是为了防止图片重名。
name参数，可以设置名字不发生改变。
use:'url-loader?name=[name].[ext]'
固定写法，表示文件名字和格式都不变。
默认图片会在url根目录中。图片名字相同会取后面那张。
此时为了重名造成问题，可以拼接加上hash值。
use:'url-loader?name=[hash:8]-[name].[ext]'，即从32位hash值中截取8位。