WebPack》》Loader原理、分类

Loader 原理

webpack它默认只知道如何处理 JS 和 JSON 模块，
Loader 是 webpack 的核心概念之一，它允许 webpack 处理除 JavaScript 之外的其他类型文件。Loader 本质上是一个函数，它接收源文件内容，对其进行转换，然后返回转换后的结果。
》》loader 分类

1. pre：前置 loader
2. normal：普通loader
3. inline：内联loader
4. post：后置loader
5. 这个4类 执行顺序 pre>normal>inline>post
   》》执行顺序

基本执行顺序规则 从右到左（或从下到上）的顺序执行：这是 webpack Loader 的基本执行顺序

同步 Loader 立即执行：同步 Loader 会按照顺序立即执行并返回结果

异步 Loader 会暂停链式执行：遇到异步 Loader 时，会等待其回调完成后再继续后续 Loader

自定义loader

我们知道loader的原理就是将输入的源内容进行处理后返回，loader 有两种方式返回处理后的内容：

## 方式一 return source  返回是源内容转换后的内容module.exports = function (source) {// 处理 source ...const content = source.replace("hello", "哈哈");return content;}## 方式二 this.callback() 这种方式可以返回除了处理内容以外的其它信息，
##       this.callback 是 webpack 给 loader 注入的 API，方便 loader 和 webpack之间通信。module.exports = function (source) {// 处理 sourceconst content = source.replace("hello", "哈哈");// 使用 this.callback 返回内容this.callback(null, content);// 使用 this.callback 返回内容时，该 loader 必须返回 undefined，// 以让 Webpack 知道该 loader 返回的结果在 this.callback 中，而不是 return 中 return};##################################################
module