【Vue】1-3、Webpack 中的 loader
一、概述
在实际开发过程中，webpack 默认只能打包处理以 .js 后缀结尾的模块。
其他的非 .js 后缀名结尾的模块 webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！
loader 加载器的作用：协助 webpack 打包处理特定的文件模块。
-
css-loader可以打包处理.css相关文件 -
less-loader可以打包处理.less相关文件 -
babel-loader可以打包处理 webpack 无法处理的高级 js 语法
二、打包处理 css 文件
步骤：
1）运行 npm install style-loader@3.0.0 css-loader@5.2.6 -D 命令，安装处理 css 文件的 loader
2）在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
module:{ // 所有第三方文件模块的匹配规则
rules: [ // 文件后缀名的匹配规则
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
}其中，test 表示匹配的文件类型，use表示对应要调用的 loader
注意：
use数组中指定的loader顺序是固定的多个
loader的调用顺序是：从后往前调用
三、打包处理 less 文件
步骤：
1）运行 npm install less-loader@10.0.1 less@4.1.1 -D 命令
2）在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
module:{ // 所有第三方文件模块的匹配规则
rules: [ // 文件后缀名的匹配规则
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
}
]
}
四、打包处理样式表中与 url 路径相关的文件
步骤：
1）运行 npm install url-loader@4.1.1 file-loader@6.2.0 -D 命令
2）在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
module:{ // 所有第三方文件模块的匹配规则
rules: [ // 文件后缀名的匹配规则
{
test:/\.jpg|png|gif$/,
use:['url-loader?limit=22229']
}
]
}其中 ？之后的是 loader 的参数项：
-
limit用来指定图片的大小，单位是字节（byte） -
只有
<=limit 大小的图片，才会被转为base64 格式的图片
五、打包处理 js 文件中的高级语法
webpack 只能打包处理 一部分高级的 JavaScript 语法。
对于那些 webpack 无法处理的高级 js 语法，需要借助于 babel-loader 进行打包处理。
例如 webpack 无法处理下面的 JavaScript 代码：
// 定义了名为 info 的装饰器
function info(target){
// 为目标添加静态属性 info
target.info = 'Person info.'
}
// 为 Person 类应用 info 装饰器
@info
class Person{}
// 打印 Person 的静态属性info
console.log(Person.info)步骤：
1）运行 npm install 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: [ // 文件后缀名的匹配规则
{
test:/\.js$/,
use:'babel-loader',
exclude:/node_modules/
}
]
}3）在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项如下：
module.exports = {
// 声明 babel 可用的插件
plugins:[
[
'@babel/plugin-proposal-decorators',
{
legacy: true
}
]
]
}Babel官网：https://babeljs.io/dosc
一 叶 知 秋，奥 妙 玄 心