6、loader

1、loader概述

	1. 在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，
webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！
	2. loader 加载器的作用：协助 webpack 打包处理特定的文件模块。比如：
		css-loader 可以打包处理 .css 相关的文件
		less-loader 可以打包处理 .less 相关的文件
		babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法

1.1 打包处理css文件

1. 运行 npm i style-loader@3.0.0 css-loader@5.2.6 -D 命令，安装处理 css 文件的 loader
2. 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
	其中，test 表示匹配的文件类型， use 表示对应要调用的 loader
注意：
⚫ use 数组中指定的 loader 顺序是固定的
⚫ 多个 loader 的调用顺序是：从后往前调用

module: {  //所有第三方文件模块的匹配规则
    rules: [    //文件名后缀的匹配规则
        // 定义了不同模块对应的loader
        { test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ]
}

1. webpack默认只能打包处理.js结尾的文件，处理不了其他后缀的文件
2. 由于代码中包含css文件，因此webpack处理不了
3. 当webpack发现某个文件处理不了的时候，会查找webpack.config.js这个配置文件
	看module.rules数组中是否配置了对应的loader加载器
4. webpack把index.css这个文件，先转交给最后一个loader进行处理（css-loader）
5. 当css-loader处理完毕之后，会把处理结果转交给下一个loader(style-loader)
6. 当style-loader处理完毕之后，如果没有下一个loader，就把处理结果转交给webpack
7. webpack把处理结果合并到/dist/main.js中，最终生成打包好的文件

1.2 打包处理less文件

① 运行 npm i less-loader@10.0.1 less@4.1.1 -D 命令
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module: {  //所有第三方文件模块的匹配规则
    rules: [    //文件名后缀的匹配规则
        // 定义了不同模块对应的loader
        // 处理.css文件的loader
        { test: /\.css$/, use: ['style-loader', 'css-loader'] },
        // 处理.less文件的loader
        { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
    ]
}

1.3 打包处理样式表中与 url 路径相关的文件

① 运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D 命令
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
其中 ? 之后的是 loader 的参数项：
	limit 用来指定图片的大小，单位是字节（byte）
	只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片

在webpack.config.js中配置：

module: {  //所有第三方文件模块的匹配规则
    rules: [    //文件名后缀的匹配规则
        // 定义了不同模块对应的loader
        // 处理.css文件的loader
        { test: /\.css$/, use: ['style-loader', 'css-loader'] },
        // 处理.less文件的loader
        { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
        // 处理图片文件的loader
        { test: /\.jpg|png|gif$/, use: 'url-loader' }
    ]
}

1.4 打包处理 js 文件中的高级语法

webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借助于 babel-loader 进行打包处理

// 定义一个装饰器函数
function info(target) {
    // 为目标添加静态属性
    target.info = 'Person info';
}

// 定义一个类
@info
class Person { }

安装：

运行如下的命令安装对应的依赖包：
npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

在webpack.config.js中配置：

module: {  //所有第三方文件模块的匹配规则
    rules: [    //文件名后缀的匹配规则
        // 定义了不同模块对应的loader
        // 处理.css文件的loader
        { test: /\.css$/, use: ['style-loader', 'css-loader'] },
        // 处理.less文件的loader
        { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
        // 处理图片文件的loader
        { test: /\.jpg|png|gif$/, use: 'url-loader' },
        // 使用babel-loader处理高级的js语法     node_modulesd目录下的第三方包不需要被打包
        { test: /\.js$/, use: 'babel-loader', exclude: /node_modulesd/ }
    ]
}

配置babel-loader
在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项如下：

module.exports = {
    // 声明babel可用的插件
    // 将来webpack调用babel-loader的时候，会先加载plugins插件来使用
    plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}