Webpack4.0各个击破(6)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的编译过程,和上面提及的都是一样的,你说要不要学?
【参考】
作者:大史不说话
链接:Webpack4.0各个击破(6)loader篇
来源:博客园
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
Webpack4.0各个击破(6)loader篇的更多相关文章
- webpack4.0各个击破(5)—— Module篇
webpack4.0各个击破(5)-- Module篇 webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决 ...
- webpack4.0各个击破(7)—— plugin篇
webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...
- Webpack4.0各个击破(10)integration篇
一. Integration 下文摘自webpack中文网: 首先我们要消除一个常见的误解,webpack是一个模块打包工具(module bundler),它不是一个任务执行工具,任务执行器是用来自 ...
- Webpack4.0各个击破(8)tapable篇
目录 一. tapable概述 二. tapable-0.2源码解析 2.1 代码结构 2.2 事件监听方法 2.3 事件触发方法 三. tapable1.0概述 一. tapable概述 tapab ...
- Webpack4.0各个击破(7)plugin篇
目录 一. plugin概述 1.1 Plugin的作用 1.2 Compiler 1.3 Compilation 二. 如何写一个plugin 四. 实战 [参考] 一. plugin概述 1.1 ...
- Webpack4.0各个击破(5)module篇
一. 模块化乱炖 脚本合并是基于模块化规范的,javascript模块化是一个非常混乱的话题,各种[*MD]规范乱飞还要外加一堆[*.js]的规范实现.现代化前端项目多基于框架进行开发,较为流行的框架 ...
- Webpack4.0各个击破(1)html篇
webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...
- webpack4.0各个击破(4)—— Javascript & splitChunk
目录 一. Js模块化开发 二. Js文件的一般打包需求 三. 使用webpack处理js文件 3.1 使用babel转换ES6+语法 3.2 脚本合并 3.3 公共模块识别 3.4 代码分割 3.5 ...
- webpack4.0各个击破(6)—— Loader篇
webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...
随机推荐
- Java:利用BigDecimal类巧妙处理Double类型精度丢失
目录 本篇要点 经典问题:浮点数精度丢失 十进制整数如何转化为二进制整数? 十进制小数如何转化为二进制数? 如何用BigDecimal解决double精度问题? new BigDecimal(doub ...
- 认识 YUV
什么是 YUV YUV是一种颜色编码格式,可以说YUV流媒体是原始流数据,大部分的视频领域都在使用.与RGB类似,但RGB更多的用于渲染时,而YUV则用在数据传输,因为它占用更少的频宽.当然,实时通讯 ...
- 关闭layer
function closeBox() { var index = parent.layer.getFrameIndex(window.name); //获取当前窗体索引 parent.layer.c ...
- 前端网页打印插件print.js(可导出pdf)
在前端开发中,想打印当前网页的指定区域内容,或将网页导出为多页的PDF,可以借助print.js实现,该插件轻量.简单.手动引入.不依赖其他库.示范项目github:https://github.co ...
- linux中的dmesg命令以及确定进程是否被系统主动kill
linux中的dmesg命令以及确定进程是否被系统主动kill Feb 21, 2017 | java | 185 Hits 近期发现线上项目的进程莫名其妙的就不见了,也没有崩溃日志,就怀疑是被操作系 ...
- LeapMotion控制器 java语言开发笔记--(连接控制器)
(1)为了连接LeapMotion控制器,创建controller对象,这个对象自动创建与控制器的服务或者后台程序连接,然后捕获数据提供给你的应用程序.可以使用该对象来获取连接信息. (2)获取Fra ...
- 加薪攻略之UI组件库实践—storybook
目录 加薪攻略之UI组件库实践-storybook 一.业务背景 二.选用方案 三.引入分析 项目结构 项目效果 四.实现步骤 1.添加依赖 2.添加npm执行脚本 3.添加配置文件 4.添加必要的w ...
- linux 下socket编程
原理 类unix系统中, 一切皆文件, 诸如磁盘文件, 显卡, 内核驱动, 网络协议栈等 socket就是linux中提供的用于网络通信的文件接口, 两台机器之间可以读写消息 在使用socket真正的 ...
- —用python写图片格式批量处理工具
python爬取微博评论(无重复数据) 前言 一.整体思路 二.获取微博地址 1.获取ajax地址 2.解析页面中的微博地址 3.获取指定用户微博地址 三.获取主评论 四.获取子评论 1.解析子评论 ...
- SonarQube学习(四)- 使用Jenkins集成JaCoCo和SonarQube检查代码测试覆盖率
一.前言 我始终觉得学习这件事是自己的事,自己会了就是会了,无关于他人,但有点小伤感的是现在的阅读量开始走低. 二.准备 安装Jenkins,请移步<Docker学习(二)- Docker 安装 ...