webpack 的编译原理
自从接触了react,vue 这两个框架,都会用到webpack这个打包工具。面试的时候,经常被问到知道webpack的编译原理吗? 可以简单的介绍一下。每每这个时候都被问的哑口无言,平时用的时候挺顺手,真正说点之乎者也出来,还是有点难度的。
一、 webpack 的作用
总结为一下三点:
1、依赖管理:方便引用第三方模块、让模块更容易复用,避免全局注入导致的冲突、避免重复加载或者加载不需要的模块。会一层一层的读取依赖的模块,添加不同的入口;同时,不会重复打包依赖的模块。
2、合并代码:把各个分散的模块集中打包成大文件,减少HTTP的请求链接数,配合UglifyJS(压缩代码)可以减少、优化代码的体积。
3、各路插件:统一处理引入的插件,babel编译ES6文件,TypeScript,eslint 可以检查编译期的错误。
一句话总结:webpack 的作用就是处理依赖,模块化,打包压缩文件,管理插件。
二、webpack 的原理
一切皆为模块,由于webpack只支持js文件,所以需要用loader 转换为webpack支持的模块,其中plugin 用于扩张webpack 的功能,在webpack构建生命周期的过程中,在合适的时机做了合适的事情。
webpack怎么工作的过程:
1、解析配置参数,合并从shell(npm install 类似的命令)和webpack.config.js文件的配置信息,输出最终的配置信息;
2、注册配置中的插件,好让插件监听webpack构建生命周期中的事件节点,做出对应的反应;
3、解析配置文件中的entry入口文件,并找出每个文件依赖的文件,递归下去;
4、在递归每个文件的过程中,根据文件类型和配置文件中的loader找出对应的loader对文件进行转换;
5、递归结束后得到每个文件最终的结果,根据entry 配置生成代码chunk(打包之后的名字);
6、输出所以chunk 到文件系统。
webpack 的编译原理的更多相关文章
- 如何编写一个WebPack的插件原理及实践
_ 阅读目录 一:webpack插件的基本原理 二:理解 Compiler对象 和 Compilation 对象 三:插件中常用的API 四:编写插件实战 回到顶部 一:webpack插件的基本原理 ...
- 前端与编译原理 用js去运行js代码 js2run
# 前端与编译原理 用js去运行js代码 js2run 前端与编译原理似乎相隔甚远,各种热门的框架都学不过来,那能顾及到这么多底层呢,前端开发者们似乎对编译原理的影响仅仅是"抽象语法树&qu ...
- 前端与编译原理——用JS写一个JS解释器
说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...
- 轻松理解webpack热更新原理
一.前言 - webpack热更新 Hot Module Replacement,简称HMR,无需完全刷新整个页面的同时,更新模块.HMR的好处,在日常开发工作中体会颇深:节省宝贵的开发时间.提升开发 ...
- 编译原理-词法分析05-正则表达式到DFA-01
编译原理-词法分析05-正则表达式到DFA 要经历 正则表达式 --> NFA --> DFA 的过程. 0. 术语 Thompson构造Thompson Construction 利用ε ...
- 跟vczh看实例学编译原理——三:Tinymoe与无歧义语法分析
文章中引用的代码均来自https://github.com/vczh/tinymoe. 看了前面的三篇文章,大家应该基本对Tinymoe的代码有一个初步的感觉了.在正确分析"print ...
- 跟vczh看实例学编译原理——二:实现Tinymoe的词法分析
文章中引用的代码均来自https://github.com/vczh/tinymoe. 实现Tinymoe的第一步自然是一个词法分析器.词法分析其所作的事情很简单,就是把一份代码分割成若干个tok ...
- 跟vczh看实例学编译原理——一:Tinymoe的设计哲学
自从<序>胡扯了快一个月之后,终于迎来了正片.之所以系列文章叫<看实例学编译原理>,是因为整个系列会通过带大家一步一步实现Tinymoe的过程,来介绍编译原理的一些知识点. 但 ...
- 跟vczh看实例学编译原理——零:序言
在<如何设计一门语言>里面,我讲了一些语言方面的东西,还有痛快的喷了一些XX粉什么的.不过单纯讲这个也是很无聊的,所以我开了这个<跟vczh看实例学编译原理>系列,意在科普一些 ...
随机推荐
- Codeforces Round #278 (Div. 2) B. Candy Boxes [brute force+constructive algorithms]
哎,最近弱爆了,,,不过这题还是不错滴~~ 要考虑完整各种情况 8795058 2014-11-22 06:52:58 njczy2010 B - Ca ...
- meta标签集
html中的meta总结: 0.声明文档使用的字符编码: <meta charset='utf-8'/> 1.优先使用 IE 最新版本和 Chrome : <meta http-eq ...
- 2017 ACM/ICPC Asia Regional Xian Online 记录
题目链接 Xian
- linux下eth0 lo wlan0
参考:http://www.cnblogs.com/see7di/archive/2011/06/17/2239722.html 内容如下: 理解linux下的 eth0,eth1,eth2,lo 网 ...
- ffmpeg 时间戳
转http://blog.csdn.net/yfh1985sdq/article/details/5721953 AVpacket里的时间戳pts和dts.单位好像是us. 问 : 时间戳pts和dt ...
- Maven插件开发教程收集(待实践)
官方教程:http://maven.apache.org/plugin-developers/index.html http://blog.csdn.net/csfreebird/article/de ...
- excel转换html
利用POI解析excel,转换成html,支持各种版本的excel.支持自定义样式.支持行列合并 需要用到的jar public class Excel2Html { /** * 读取Excel并转换 ...
- QML 开发神奇加成之为网络资源设置本地缓存
QML 开发神奇加成之为网络资源设置本地缓存 直接上码: #include <QNetworkAccessManager> #include <QNetworkDiskCache&g ...
- Oracle 12c agent install for linux
安装Agent代理 在EM11g时,agent安装是通过在被监制主机端下载agent代理并安装,在EM12c版本号上,能够在EM12c服务端.通过"推送"的方式把agent代理在远 ...
- 【转】Linux cp -a用法
cp file1 file1-bk ---------> 这样复制备份的话文件的属性(创建时间这些会变化) 要想不变化, cp -a file1 file-bk 加上一个 -a 这个参数就 ...