webpack4.0各个击破(6)—— Loader篇

webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高。本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习webpack工具中相应的处理办法。(本篇中的参数配置及使用方式均基于webpack4.0版本

一. loader综述

loaderwebpack的核心概念之一,它的基本工作流是将一个文件以字符串的形式读入,对其进行语法分析及转换(或者直接在loader中引入现成的编译工具,例如sass-loader中就引入了node-sass将SCSS代码转换为CSS代码,再交由css-loader处理),然后交由下一环节进行处理,所有载入的模块最终都会经过moduleFactory处理,转成javascript可以识别和运行的代码,从而完成模块的集成。

loader支持链式调用,所以开发上需要严格遵循“单一职责”原则,即每个loader只负责自己需要负责的事情:将输入信息进行处理,并输出为下一个loader可识别的格式。

实际开发中,很少会出现需要自己写loader来实现复杂需求的场景,如果某个扩展名的文件无法快速集成到自动化构建工具里,估计很快就会被抛弃了,大家都那么忙是吧。但是了解loader的基本原理和编译器的基本原理却是非常有必要的。

二. 如何写一个loader

如果需要编写一个功能完整的loader,建议先到webpack的官方网站浏览一下loader有哪些API,地址:webpack官网-loader API,其中对于编写同步loader异步loader如何跳过loader如何获取options配置项等等都做了非常详细的解释,本篇中不再赘述。

假设现在要实现一个dash-loader,它的功能是加载并处理名称为*.tpl.html的文件,将其变为一个CommonJs模块。也就是说要完成一个如下的基本转换:

转换前的文本:

<div>
    <h3>这里是标题</h3>
    <p>这里是内容</p>    
</div>

转换后的文本:

var str = '<div><h3>这里是标题</h3><p>这里是内容</p></div>';
module.exports = str;

那么webpack.config.js中需要增加如下的配置:

...
module:{
    rules:[{
        test: /\.tpl\.html$/,
        use:[{
            loader:'dash-loader'
        }]
    }]
}

在项目的node_modules依赖文件夹中新建dash-loader文件夹,并在其中新建一个index.js文件,内容的基本格式为:

//index.js
module.exports = function(source){
    var tpl="";
    source.split(/\r?\n/).forEach(function(line){
        line=line.trim();
        if(!line.length){
            return;
        }
        //对line进行处理...
        tpl+=line;
    });
    return "var tpl=\'" + tpl + "\'\nmodule.exports = tpl"; 
}

最终由dash-loader返回的数据就好像是从某个CommonJs模块中读入的一样了。

三. loader的编译器本质

了解了loader的基本结构,那么loader里到底应该写点什么才能完成代码转换呢?这就涉及到了一个新的概念——编译器(Compiler)。一个基本的编译器,需要经过tokenize,parse,transform,stringify几个核心步骤,它的应用是非常广的,SPA中的virtual-DOM的解析,babel中的ES6语法解析等等,babel的官网曾经推荐过一个非常棒的开源项目(10k+Star),详细讲述了如何一步一步实现一个编译器的,建议感兴趣的同学可以自行学习:

【The-Super-Tiny-Compiler】——https://github.com/jamiebuilds/the-super-tiny-compiler

【参考】

《如何编写一个loader》

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏嵌入式程序猿

今日我推荐:libModbus

我们曾在公众号里给大家讲过很多有关于Modbus的知识,还培训过Modbus驱动的开发和调试,今天我们给大家推荐一个常用的开源Modbus协议栈libmodbu...

4527
来自专栏飞雪无情的博客

Go语言实战笔记(二十三)| Go 调试

对于任何程序员来说,调试程序是必备的技能。当我们的开发好的程序不符合我们的预期时,就需要我们通过调试它找到根本的原因,然后才可以有针对性的解决它。

1085
来自专栏一枝花算不算浪漫

【python】Python 资源大全中文版

4572
来自专栏unlike

用paxos实现多副本日志系统--multi paxos部分

上篇 basic paxos : https://cloud.tencent.com/developer/article/1147420

3858
来自专栏北京马哥教育

Python 中的进程、线程、协程、同步、异步、回调

进程和线程究竟是什么东西?传统网络服务模型是如何工作的?协程和线程的关系和区别有哪些?IO过程在什么时间发生? 在刚刚结束的 PyCon2014 上海站,来自七...

4445
来自专栏代码GG之家

只需一个命令,快速定位android的启动耗时

有兴趣合作,帮忙制作公众号的一些宣传图册的伙伴,可以加我微信,商谈具体事宜。 回顾: Android 启动过程框架 这节我们讲一个命令,用来定位android...

2036
来自专栏皮振伟的专栏

[nptl][mutex]老司机带你十分钟定位死锁问题

前言: 死锁问题,几乎可以用“自古”来形容。PV原语一出,信号量嵌套使用,就伴随着死锁问题的发生。死锁类问题的解决过程,基本上就是定位到发生死锁的位置以及原因,...

5747
来自专栏H2Cloud

C++ 后台程序实时性能监控

面对的问题: 做后台程序经常会被问一句话,你的程序能撑多少人。一般官方一点的回答是这个得根据实际情况而定。实际上后台程序的性能是可以被量化的。我们开发的每一个服...

4108
来自专栏Janti

你可以这么理解五种I/O模型

因为项目需要,接触和使用了Netty,Netty是高性能NIO通信框架,在业界拥有很好的口碑,但知其然不知其所以然。

2035
来自专栏逸鹏说道

AI---Anaconda For Linux (附C#交互式编程的引入)

Jupyter美化: https://www.cnblogs.com/dotnetcrazy/p/8760189.html

1374

扫码关注云+社区

领取腾讯云代金券