webpck深入浅出教程（二）如何写一个loader

约定不等于承诺〃 2023-06-29 12:57 11阅读 0赞

从官网我们知道，loader的特性主要有：

*  链式传递，按照配置时相反的顺序链式执行；
 *  基于 Node 环境，拥有 较高权限，比如文件的增删查改；
 *  可同步也可异步。
 *  支持option选项

loader的编写原则:

*  单一原则: 每个 Loader 只做一件事；
 *  链式调用: Webpack 会按顺序链式调用每个 Loader；
 *  统一原则: 遵循 Webpack 制定的设计规则和结构，输入与输出均为字符串，各个 Loader 完全独立，即插即用；

loader 会返回一个或者两个值。第一个值的类型是 JavaScript 代码的字符串或者 buffer。第二个参数值是 SourceMap，它是个 JavaScript 对象。

注意：loader 可以被链式调用意味着不一定要输出 JavaScript。只要下一个 loader 可以处理这个输出，这个 loader 就可以返回任意类型的模块。

官网上提出要充分利用 [`loader-utils`][loader-utils] 包。它提供了许多有用的工具，但最常用的一种工具是**获取传递给 loader 的选项**。[`schema-utils`][schema-utils] 包配合 `loader-utils`，用于保证 loader 选项，进行与 JSON Schema 结构一致的校验。同时如果一个 loader 使用外部资源（例如，从文件系统读取），**必须**声明它。这些信息用于使缓存 loaders 无效，以及在观察模式(watch mode)下重编译。

基于目前webpack强大的生态系统，所以一般我们的loader都能在[awesome-webpack][]社区中找到，同时如果你想编写一个loader前，最好先看一下官网：[如何编写一个loader][loader]

举一个简单的应用场景：

需要批量修改json文件中的一个字段，我们将需要修改的字段通过loder的option选项传入loader，然后通过loader-utils库中的getOptions得到传入的参数并处理，处理完成后返回处理完成的结果,并输出到文件dist/index.json

modify-json-loader.js

最后，为了方便测试我们使用loader-runner测试loader。

首先安装loader-runner，并创建一个run-loader.js

定义一个需要修改的json文件example.json

{
        "name": "hell,webpack loader"
    }

然后我们运行修改

node run-loader

结果如我们所预期的那样，result中已经修改了json文件的结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70][]

并且我们在dist目录下也生成了我们想要的json文件

{"name":"CoolSummer"}

代码详见：github地址：[https://github.com/karma2014/modifyjson-loader][https_github.com_karma2014_modifyjson-loader]

项目完整目录及路径：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70 1][]

[loader-utils]: https://github.com/webpack/loader-utils
[schema-utils]: https://github.com/webpack-contrib/schema-utils
[awesome-webpack]: https://github.com/webpack-contrib/awesome-webpack#loaders
[loader]: https://webpack.docschina.org/contribute/writing-a-loader/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200404112011249.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg=,size_16,color_FFFFFF,t_70
[https_github.com_karma2014_modifyjson-loader]: https://github.com/karma2014/modifyjson-loader
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020040411212962.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ3NDQxMTg=,size_16,color_FFFFFF,t_70