✏️装载机知识共享n
哪些是装载机n
webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱即用的内置功能。加载器允许 Webpack 处理其他类型的文件，并将它们转换为有效的模块供应用程序使用并添加到依赖关系图中。加载器本质上是一个作为函数导入的 JavaScript 模块。- WebPack的官方英文文档n
如右图所示，在使用 webpack 的过程中，经常出现以下两种方式，后者更多是在 webpack 配置文件中，根据文件匹配信息来配置加载器相关信息;前者更多的是关于在加载器/插件中更改/替换/生成内联加载器信息。这就引出了装载机的相关分类。n
// webpack.config.js
{
module: {
rules: [
{
test: /.txt$/,
use: [
{
loader: getLoader("a-loader.js"),
},
],
enforce: "pre",
},
{
test: /.txt$/,
use: [
{
loader: getLoader("b-loader.js"),
}
],
enforce: "post",
},
],
},
}
n
// app.js
import "/Users/jiangyuereee/Desktop/loader/d-loader.js!./txt.txt"
n
装载机的分类n
在 webpack 中，加载器可以分为四类：预置、正常、内联和后置。n
施行n
对于 post、normal、pre，主要取决于 Rule.enforcement 在配置中的值：pre||开机自检，如果未设置，则正常。n
注意：与规则相反，而不是加载程序。这将作用于与规则对应的所有加载程序。n
内嵌n
内联加载器的特殊之处在于它们在导入/需要时写入代码。对于内联，有三种前缀模式：n
内联加载器通过！拆分资源中的加载程序，同时在加载程序旁边支持它，通过 ？传递参数，并参阅 loader.options 了解参数信息。n
上面提到的三个前缀句子写在内联加载器字符串的前缀上，以指示忽略哪个配置加载器n
例n以 a-loader 作为预加载器，b-loader 作为普通加载器
，c-loader 作为后加载器。n
附录：本文中的加载程序都是n
module.exports = function (content) {
console.log("x-loader");
return content;
};
module.exports.pitch = function (remainingRequest, precedingRequest, data) {
console.log("x-loader-pitch");
};
n
import "/Users/jiangyuereee/Desktop/loader/d-loader.js!./txt.txt"
c-loader-pitch
d-loader-pitch
b-loader-pitch
a-loader-pitch
a-loader
b-loader
d-loader
c-loader
n
import "!/Users/jiangyuereee/Desktop/loader/d-loader.js!./txt.txt";
c-loader-pitch
d-loader-pitch
a-loader-pitch
a-loader
d-loader
c-loader
n
import "-!/Users/jiangyuereee/Desktop/loader/d-loader.js!./txt.txt";
c-loader-pitch
d-loader-pitch
d-loader
c-loader
n
import "!!/Users/jiangyuereee/Desktop/loader/d-loader.js!./txt.txt";
d-loader-pitch
d-loader
n
加载程序的优先级n
四个加载程序调用序列是：pre>normal>inline>post。n
在以下情况下n
同一种加载器，调用的优先级是自下而上，从右到左。（在音高情况下，反之亦然）。n
例如：n
{
module: {
rules: [
{
test: /.txt$/,
use: [
{
loader: getLoader("a-loader.js"),
},
],
enforce: "post",
},
{
test: /.txt$/,
use: [
{
loader: getLoader("b-loader.js"),
},
{
loader: getLoader("c-loader.js"),
},
],
enforce: "post",
},
],
},
}
n
a-loader-pitch
b-loader-pitch
c-loader-pitch
c-loader
b-loader
a-loader
n
加载程序调用链n
每个加载器都有自己的正常函数和音高函数，调用过程是调用n
装载机各自的俯仰函数按优先级从低到高的顺序，然后从高到高调用自己的正常函数，这个过程更像是葱模型。n
n
装载机间距n
加载程序始终从右到左调用。在某些情况下，加载程序只关心请求旁边的元数据，而忽略前一个加载程序的结果。在实际执行加载器（从右到左）之前，从左到右调用加载器上的俯仰模式。- WebPack的官方英文文档n
对于加载器，不仅可以通过 module.exports 导入处理程序，还可以通过 module.exports.pitch 导入 pitch 方法。正常情况下，在从右到左调用加载器之前，会进行从左到右的音高调用，而在音高调用过程中，如果任何一个有返回值，就会阻塞后续的加载器调用链，从而将自己的返回结果作为内容传递给前一个加载器。n
附录：音高方法也是同步/异步的，你也可以选择 return 或者 this.callback 来传递更多信息，后面会提到。n
加载程序的调用过程：n
n
一旦其中一个音高返回结果，后续加载器将被跳过，返回结果将传递给前一个加载器。n
n
像常见的样式加载器/vue-loader等，会使用俯仰阶段来拦截处理工作，从而实现加载器的特征工作。n
同步/异步加载器n
如果是单个处理结果，可以直接在同步模式下返回。如果有多个处理结果，则必须调用 this.callback（）。在异步模式下，必须调用 this.async（） 来告诉加载器运行器等待异步结果，该结果返回 this.callback（） bounce 函数。然后webpack忽略包，加载程序必须返回 undefinedwebpack忽略包，但调用 bounce 函数。- WebPack的官方英文文档n
在 webpack 中，加载器可能更耗时，因为它们依赖于读取外部配置文件、进行网络请求等。此时，如果执行同步操作，会导致 webpack 阻塞，因此加载器将是同步/异步的。n
在加载器中，可以通过两种方式返回数据：n
this.callback(
err: Error | null, // 错误信息
content: string | Buffer, // content信息
sourceMap?: SourceMap, // sourceMap
meta?: any // 会被 webpack 忽略，可以是任何东西（例如：AST、一些元数据啥的）。
);
n
同步装载机n
对于同步加载器，return 或 this.callback 都可以达到所需的效果。只是说，this.callback 可以返回比返回更多的信息。n
module.exports = function(content, map, meta) {
// return handleData(content);
this.callback(null, handleData(content), handleSourceMap(map), meta);
return; // 当调用 callback() 函数时，总是返回 undefined
};
n
异步加载器n
对于异步加载器，回调函数需要通过 this.async（） 获取。n
module.exports = function(content, map, meta) {
var callback = this.async();
asycnHandleData(content, function(err, result) {
if (err) return callback(err);
callback(null, result, map, meta);
});
};
n
加载程序的参数n
通常，初始加载程序只有一个输入参数：资源文件的内容。默认情况下，资源文件的内容作为 UTF-8 字符串传递到加载程序。如有必要，加载器可以设置 module.exports.raw=true;以指示需要接受缓冲区。同时，每个加载器都可以传递字符串||缓冲区，编译器将根据 raw 的值在加载器之间转换它。（例如图像文件等）。n
根据回调参数，还可以知道不仅是起始加载器，加载器可以接受三个参数：content、sourceMap、meta。n
加载器音高参数n
音高有三个参数：n
补充：左右，相对于加载程序调用链，正常相位。n
例n
例如，有三个加载器 a、b 和 c，（使用：[a，b，cn
]） 处理文件时，a、b 和 c 对应的音高参数为：n
加载器的输出n
编译器需要最后一个加载器形成的处理结果。结果应该是字符串或缓冲区（要转换为字符串）类型，表示模块的 JavaScript 源代码。或者，您可以传递可选的源映射结果（JSON 格式）。- WebPack的官方英文文档n
当装载机n
link 到达最后一个加载器，编译器期望处理结果是可以转换为 String 的 Buffer 或 String 类型，表示当前模板处理的 js 源代码。同时，根据回调函数，还可以传递一个 sourceMap。n
除了正常加载程序处理返回的输出源代码外，还可以根据 this.emitFile 制作其他输出文件。n
emitFile(
name: string,
content: Buffer|string,
sourceMap?: {...}
)；
n
加载程序缓存n
默认情况下，加载程序处理的结果标记为可缓存。由于许多加载器转换过程非常耗时，因此 webpack 默认会将所有加载器标记为可缓存，并且如果依赖文件没有更改，则不会重新加载处理。n
您可以标记加载程序n
由于 this.cacheable=false 不可缓存，在大多数情况下，仍然不建议将加载程序标记为不可缓存，您可以使用 this.addDependency 添加文件依赖项。n
例n
{
entry: "./app.js",
mode: "development",
module: {
rules: [
{
test: /.txt$/,
use: [
{
loader: getLoader("a-loader.js"),
},
],
},
]
}
}
n
当.txt文件n
没有更改，监视模式下的重新编译器不会重新调用 A-Loader 来重新处理.txt文件。如果要在.js文件更改时重新调用 a-loader，可以使用 this.addDependency 添加文件依赖项。n
module.exports = function (content) {
console.log("a-loader");
this.addDependency("/Users/jiangyuereee/Desktop/loader/c.js");
return content;
};
n
注意：将重新激活整个加载程序调用链。n
加载器接口n
除了上面提到的一些 API 之外，还有其他 API 可以在加载器中使用：n
装载机-流道开发套件n
加载器的开发和调试可以通过这个包进行。n
整合装载机开发中的一些常用技能，促进开发。n
Schema-utilsn
为了验证加载器选项的合法性（包括但不限于加载程序的使用）。n
引用n
Webpack 官方英文文档n
装载机机构n-
-欢迎关注“字节飞”简历投递联系邮箱“tech@bytedance.com”n","to":"zh-Hans","sentLen":{"srcSentLen":[30,21,123,146,76,43,248,100,58,10,10,29,100,11,100,28,43,48,10,86,45,25,88,72,149,11,85,49,10,10,10,10,10,30,64,22,78,40,16,10,10,21,102,182,10,16,49,125,113,43,150,276,169,28,11,146,11,158,35,89,73,163,69,43,150,141,52,11,22,91,68,11,23,90,11,28,95,89,58,48,47,80,26,162,30,31,80,11,65,85,28,76,129,75,43,19,210,85,143,11,16,73,194,27,182,11,11,22,103,114,11,54,13,109,33,77,88,16,97,14,42,20,93],"transSentLen":[14,9,58,54,32,16,77,33,15,10,10,10,38,5,58,15,21,19,5,30,13,11,29,32,42,5,55,17,10,10,10,10,10,12,39,9,28,15,7,10,10,11,31,53,10,8,16,37,34,16,78,92,65,14,11,42,11,54,11,26,32,73,37,16,49,42,23,11,8,46,32,11,9,37,11,10,29,33,37,11,18,28,11,60,11,12,26,5,32,30,9,23,45,27,17,7,80,29,53,11,9,26,67,13,92,5,11,10,48,59,11,22,9,40,14,23,25,16,33,6,18,9,42]}}]}]
