Webpack 作为最流行的前端打包工具之一，能够自动化打包、压缩代码、转换 ES6/TypeScript 等流行的前端语言，以及支持 CSS 打包、图片打包等功能。而 Loader 则是 Webpack 的重要组成部分之一，用于转换某些特定类型的模块，比如将 Sass 转换成 CSS、图片转换成 base64 等。
在本文中，我们将会讲解如何手写一个简单的 Loader，以及该 Loader 的使用案例。
Loader 是什么？
在 Webpack 中，Loader 的主要作用是将一个模块“加载”到 JavaScript 中，并将其转换成可执行的代码。在转换过程中，Webpack 还支持插件的形式来修改代码的行为。
简单来说，Loader 可以理解为一些特殊的函数，用于将非 JavaScript 文件转换为 JavaScript 文件，并为该文件注入指定的行为。一般情况下，我们会在 webpack.config.js 中进行配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------------
-------- ---------------
---- -
------- --------------
-
--
-
----- ---------
---- -
- ------- -------------- --
- ------- ------------ -
-
-
-
-
--以上代码的意思是，对于所有以 .js 或 .jsx 结尾的文件，我们将会使用 babel-loader 进行转换。而对于以 .css 结尾的文件，我们将先使用 css-loader 将该文件转成模块，并将其导入到 JavaScript 中，然后使用 style-loader 将其添加到 HTML 中。
如何编写一个简单的 Loader
为了理解 Loader 的实现方式，我们可以通过手写一个简单的 Loader，来模拟模块的转换和导入过程。
基本的转换方法
事实上，在大多数情况下，一个 Loader 处理的文件类型都是与某个特定的后缀相关联的。比如，.js 与 babel-loader 相关联，而 .css 与 css-loader 相关联。那么，对于一个自定义的 .md 文件，如何让其通过 Webpack 提供的编译流程，最后被打包成可执行的代码呢？
首先，我们需要确定 .md 文件的类型，然后通过 test 属性来匹配它的类型。在匹配到该文件后，Webpack 会尝试使用该 Loader 来转换该文件，并将结果打包成 JavaScript 文件。
// markdown-loader.js
module.exports = function(source) {
// ...
return `export default ${JSON.stringify(html)}`;
};以上代码就是一个基本的 Loader 实现方式。该代码将一个 .md 文件转化成了一段 HTML 代码，并导出为一个默认的 JavaScript 模块。
增强 Loader 的转换行为
我们可以借助 this 上下文对象来访问 Loader 的配置项。比如在 markdown-loader.js 中，我们可以通过 this.query 来访问 Loader 的选项：
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
------ -
-
----- --------
---- -
-
------- -------------------------------------
-------- -
-------- -----
------------ ----
-
-
-
-
-
--
-- ---
-在使用该 Loader 的时候，我们提供了两个选项：linkify 和 typographer。那么，在我们的 markdown-loader.js 中，我们就可以通过 this.query 来获取这些选项：
-- -------------------- ---- ------- -- ------------------ ----- ---------- - ----------------------- ----- -- - --- ------------- ----- ---- - ------------------------ -------------- - ---------------- - ----- ------- - ------------------ ----- ---- - ---------------------- --------- ------ ------- ------- ------------------------- --
以上代码将会把一段 Markdown 导出成获取 linkify 和 typographer 选项后的 HTML 代码。在这个案例中，我们只是用插件对这个 HTML 做了简单的转义，而实际上，我们可以用插件来实现更多高级的功能。
实际应用
有了自己的 Loader 之后，我们要如何实际应用它呢？事实上，我们只需要在 webpack.config.js 中的 rules 数组配置项中，添加该 Loader 的使用即可：
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
------ -
-
----- --------
---- -
-
------- -------------------------------------
-------- -
-------- -----
------------ ----
-
-
-
-
-
--
-- ---
-在该配置代码中，我们使用了一个 markdown-loader.js 的代码，它将会匹配所有以 .md 结尾的文件，并将其转换成能够被运行的 JavaScript 代码。而在使用的时候，我们可以像导入其他模块一样导入该 Loader：
import markdown from './example.md';
const html = document.createElement('html');
html.innerHTML = markdown;
document.appendChild(html);以上代码会将 HTML 插入到文档中，并更新渲染界面。
总结
在本文中，我们介绍了什么是 Loader，并且手写了一个简单的 Markdown Loader。同时，我们还讲解了如何在 Webpack 中使用该 Loader，并给出了实际案例。通过本文的学习，你应该对 Webpack 的 Loader 有了更深的理解，并且可以在实际开发中基于这个思路来使用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64acba0848841e98948aa3f4