本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家带来的内容是关于Webpack如何实现Loader?(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。如何实现一个Loader?
我们在上几节有讲过loader,今天我们来深入了解它们,最暴力的方式莫过于动手实现它们
好了,回到正题, 先来回顾一下loader
loader定义: 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件
简单使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
回顾了loader的定义及简单使用后,我们再来分析一下实现loader的思路
单一职责,一个loader只做一件事链式组合,链中的每个 loader 会将转换应用在已处理过的资源上
模块化,是导出为一个函数的 node 模块
参数合并,loader 可以通过 options 对象配置基于上面分析的几点,我们开始动手
1 2 3 4 5 6 |
|
我们发现上面直接使用了return,是因为是同步类的loader且返回的内容唯一,如果你希望你的loader支持链式调用,将结果返给下一个loader继续使用,这时候就需要用webpack提供的api
这里我们简单看一下this.callback的定义,一个可以同步或者异步调用的可以返回多个结果的函数。预期的参数是
1 2 3 4 5 6 |
|
1 2 3 4 5 6 7 8 9 |
|
手写一个loader对没有研究过的听上去好像有点难,事实上, 掌握上面所介绍的内容及思想,就可以开始写一个简单的 Loader 了, 我们再来用简单的代码绥一下loader到底是什么?
1 2 3 4 5 6 7 |
|
让你的loader更好用
loader api中有几个好用的家伙这里就顺便带一下
this.cacheable() 从提高执行效率上,如何处理利用缓存是极其重要的, webpack 中this.cacheable就可以轻松将loader缓存了
this.async() 当一个loader无依赖时,我们应该异步的去返回结果
案例分析
下方贴上less-loader的源码,代码很简洁,结合上方我们所分析的,也很容易理解
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
总结
loader是一个node模块编写loader时要遵循单一原则,每个loader只做一种"转义"工作
webpack为我们提供了丰富的loader api
webpack为我们还提供了工具函数集――loader-utils
【相关推荐:JavaScript视频教程】
以上就是Webpack如何实现Loader?(附代码)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《javascript》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者