Vue
webpack中的loader，webpack打包css、less、url文件等资源
05-21 10:11loader概述
在实际开发过程中，webpack默认只能打包处理以.js结尾的文件（模块），其它非.js后缀结尾的模块，webpack处理不了，需要调用loader加载器才可以正常打包，否则会报错。
loader加载器的作用：协助webpack打包处理特定的文件模块，比如：
- css-loader 可以打包处理.css相关的文件
- less-loader 可以打包处理.less相关的文件
- babel-loader 可以打包处理webpack无法处理的高级js语法
loader调用过程
打包处理css文件
安装css文件的loader
npm i style-loader css-loader -D
在webpack.config.js配置文件的 module->rules数组中，添加loader规则：
//所有第三方文件模块的匹配规则
module: {
//文件后缀名的匹配规则
rules: [
//test表示匹配的文件类型，use表示对应要调用的loader
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
}
注意：
1、use数组中指定的loader顺序是固定的
2、多个loader的调用顺序是：从后往前调用
打包处理less文件
安装less文件的loader
npm i style-loader css-loader less-loader less -D //less是less-loader的内置依赖项，不需要显式声明，less-loader内部会用到它
在webpack.config.js配置文件的 module->rules数组中，添加loader规则：
module: {
ules: [
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
]
}
打包处理样式表中与url路径相关的文件（图片）
编写样式时，有些精灵图或小图片，也会用url方式指定，如果在样式表中引用了太多的小图片，会导致网页发起一些不必要的网络请求，如何优化？
把小图片转成base_64格式，减少一些不必要的网络请求，即可提高网页的加载性能。
但并不是所有图片都适合base_64，只有那些小图片才适合转成base_64，大图片直接发请求即可。
控制哪些图片转base_64，哪些图片不转base_64，需要用到url-loader参数项。
安装
npm i url-loader file-loader -D //file-loader是内置依赖项（用于处理不转base64的图片），只需安装即可，不需要显示声明和配置
在小于webopack5的版本中，通过在webpack.config.js配置文件的 module->rules数组中，添加loader规则即可直接使用url-loader：
module: {
rules: [
{
test: /\.jpg|jpeg|png|gif$/, //匹配图片文件
use: {
loader: 'url-loader', //通过 loader 属性指定要调用的 loader
options: { //通过 options 属性指定参数项
limit: 8196 //用来指定图片大小，单位是字节，小于limit的图片会被转成base64，以减少请求
}
}
}
]
}
高于webpack5的版本弃用了url-loader，且样式表中的url可以直接显示，若要继续使用url-loader，需要做一系列配置（文档：https://webpack.docschina.org/guides/asset-modules/）
module: {
//文件后缀名的匹配规则
rules: [
//test表示匹配的文件类型，use表示对应要调用的loader
{
test: /\.(png|jpe?g|gif|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8196, //文件大小限制，单位为字节，小于此数字的图片会被转成base64，以减少请求
name: '[name].[hash:8].[ext]', //输出文件名；[]内表示变量；name：原图片名；hash:8：取8位哈希值；ext：文件扩展名
outputPath: 'images/', //输出目录
esModule: false //不用的是CommonJS规范
},
},
],
type: 'javascript/auto', //解决 asset 重复的问题
},
]
}
通过上面的配置，小于8196字节的图片，会被转成base64输出，大于8196字节的图片，会在output配置的输出目录下，创建images文件夹，并将图片放置其中。
打包处理高级js语法
包的名称如下
babel-loader
@babel/core
@babel/plugin-proposal-class-properties
安装babel-loader相关的包
npm i babel-loader @babel/core @babel/plugin-proposal-class-properties -D
配置babel-loader
在webpack.config.js的 module->rules数组中，添加loader规则如下：
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
plugins: ['@babel/plugin-proposal-class-properties'],
}
}
}
