# loader-learn

**Repository Path**: peng_xi/loader-learning

## Basic Information

- **Project Name**: loader-learn
- **Description**: 学习loader的仓库
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-20
- **Last Updated**: 2024-09-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# loader学习


#### loader概念
loader 就是帮助webpack将不同类型的文件转换为webpack可识别的模块


#### loader 执行顺序
在 Webpack 中，loader 可以被分为 4 类：pre 前置、post 后置、normal 普通和 inline 行内。其中 pre 和 post loader，可以通过 rule 对象的 enforce 属性来指定

执行顺序 pre > normal > inline > post   相同优先级按  从右到左，从下到上执行


#### loader 分类 
1.同步loader 

2.异步loader  const callback = this.async();

3.raw loader  module.exports.raw = true;

4.pitch loader   module.exports.pitch = function () {}  pitch方式执行顺序为从左到右

#### loader API
https://webpack.docschina.org/api/loaders/#synchronous-loaders


#### plugin作用
扩展webpack,加入自定义构建行为,使webpack可以执行更广泛的任务,拥有更强的构建能力


#### plugin工作原理
webpack会在编译代码过程中,触发一系列 Tapable钩子事件,plugin所做的就是找到对应的钩子,往上挂载自己的任务,也就是注册事件,这样,当webpack构建的过程中,插件注册的事件就会随着钩子的触发而执行了.

Tapable暴露三个方法给插件注入不同类型的自定义构建行为 

tap: 可以注册同步钩子和异步钩子(里面全为同步代码)
tapAsync: 回调方式注册异步钩子
tapPromise:Promise方式注册异步钩子

compiler : https://webpack.docschina.org/api/compiler-hooks/