Webpack4.0各个击破(6)loader篇
Webpack4.0各个击破(6)loader篇
- 一. loader综述
- 二. 如何写一个loader
- 三. loader的编译器本质
- 【参考】
一. loader综述
loader
是webpack
的核心概念之一,它的基本工作流是将一个文件以字符串的形式读入,对其进行语法分析及转换(或者直接在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
笔者最近在阅读《你不知道的javascript》一书,发现第一节就在讲述基本的编译原理,是的,你每天都在用的javascript的编译过程,和上面提及的都是一样的,你说要不要学?
【参考】
《如何编写一个loader》
Webpack4.0各个击破(6)loader篇相关推荐
- webpack4.0各个击破(7)—— plugin篇
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
- Webpack4.0各个击破(7)plugin篇
目录 一. plugin概述 1.1 Plugin的作用 1.2 Compiler 1.3 Compilation 二. 如何写一个plugin 四. 实战 [参考] 一. plugin概述 1.1 ...
- webpack4.0各个击破(4)—— Javascript splitChunk
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
- webpack4.0各个击破(6)—— Loader篇
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
- webpack4.0各个击破(2)—— CSS篇
webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...
- webpack4.0各个击破(10)—— Integration篇
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
- webpack4.0各个击破(3)—— Assets篇
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
- webpack4.0各个击破(9)—— karma篇
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
- webpack4.0各个击破(8)—— tapable篇
[摘要] webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点 ...
最新文章
- thinkphp pathinfo nginx 无法加载模块:Index
- HTML5标签学习之~~~
- jQuery 特殊选择器this
- 【python初识】文件存储与异常
- 【数学与算法】步长一维搜索、梯度下降法、最速下降法、牛顿法
- 判别两棵树是否相等 设计算法_从匈牙利算法到KM算法
- CSS3中word-break和word-wrap有什么区别?
- 小猫的java基础知识点汇总(下)
- Hibernate+mysql 中文问题解决方案.
- nginx 的 rewrite 模块
- Go语言内置的基础类型
- JS开发引用HTML DOM的location和document对象
- docker 进入停止的容器_在Docker中运行一个Ubuntu镜像
- python产生随机数的函数_Python 随机数函数
- java学生管理系统,(史上最全)
- 查看自己电脑连接过的WiFi密码
- 事务故障、介质故障、系统故障恢复方法及区别
- CSS 字体新玩法之彩色字体
- 如何执行IntelliJ IDEA 中的.sql文件
- oracle证书怎么查成绩,Oracle认证考试成绩查询
热门文章
- [Android] 该文件包与具有同一名称的现有文件包存在冲突
- iOS登陆密码加密-HMAC
- 想给公司起个大气点的名字,大家帮忙啊!!!
- 【JY|理念】结构概念设计之(设计理念进展)
- Web前端系列技术之移动端CSDN会员页面复刻(动态完整版)
- POJ3169 Layout , 最短路算法解差分约束问题
- html div中css设置平均水平分布,CSS - 水平和垂直分布div
- python + 数学公式 + 图像 表白 LOVE YOU❤
- Can't locate Time/HiRes.pm in @INC错误的处理方法 perl安装不全
- ~1前端开发是干什么的?