自从接触了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 的编译原理的更多相关文章

  1. 如何编写一个WebPack的插件原理及实践

    _ 阅读目录 一:webpack插件的基本原理 二:理解 Compiler对象 和 Compilation 对象 三:插件中常用的API 四:编写插件实战 回到顶部 一:webpack插件的基本原理 ...

  2. 前端与编译原理 用js去运行js代码 js2run

    # 前端与编译原理 用js去运行js代码 js2run 前端与编译原理似乎相隔甚远,各种热门的框架都学不过来,那能顾及到这么多底层呢,前端开发者们似乎对编译原理的影响仅仅是"抽象语法树&qu ...

  3. 前端与编译原理——用JS写一个JS解释器

    说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...

  4. 轻松理解webpack热更新原理

    一.前言 - webpack热更新 Hot Module Replacement,简称HMR,无需完全刷新整个页面的同时,更新模块.HMR的好处,在日常开发工作中体会颇深:节省宝贵的开发时间.提升开发 ...

  5. 编译原理-词法分析05-正则表达式到DFA-01

    编译原理-词法分析05-正则表达式到DFA 要经历 正则表达式 --> NFA --> DFA 的过程. 0. 术语 Thompson构造Thompson Construction 利用ε ...

  6. 跟vczh看实例学编译原理——三:Tinymoe与无歧义语法分析

    文章中引用的代码均来自https://github.com/vczh/tinymoe.   看了前面的三篇文章,大家应该基本对Tinymoe的代码有一个初步的感觉了.在正确分析"print ...

  7. 跟vczh看实例学编译原理——二:实现Tinymoe的词法分析

    文章中引用的代码均来自https://github.com/vczh/tinymoe.   实现Tinymoe的第一步自然是一个词法分析器.词法分析其所作的事情很简单,就是把一份代码分割成若干个tok ...

  8. 跟vczh看实例学编译原理——一:Tinymoe的设计哲学

    自从<序>胡扯了快一个月之后,终于迎来了正片.之所以系列文章叫<看实例学编译原理>,是因为整个系列会通过带大家一步一步实现Tinymoe的过程,来介绍编译原理的一些知识点. 但 ...

  9. 跟vczh看实例学编译原理——零:序言

    在<如何设计一门语言>里面,我讲了一些语言方面的东西,还有痛快的喷了一些XX粉什么的.不过单纯讲这个也是很无聊的,所以我开了这个<跟vczh看实例学编译原理>系列,意在科普一些 ...

随机推荐

  1. Codeforces Round #278 (Div. 2) B. Candy Boxes [brute force+constructive algorithms]

    哎,最近弱爆了,,,不过这题还是不错滴~~ 要考虑完整各种情况 8795058                 2014-11-22 06:52:58     njczy2010     B - Ca ...

  2. meta标签集

    html中的meta总结: 0.声明文档使用的字符编码: <meta charset='utf-8'/> 1.优先使用 IE 最新版本和 Chrome : <meta http-eq ...

  3. 2017 ACM/ICPC Asia Regional Xian Online 记录

    题目链接  Xian

  4. linux下eth0 lo wlan0

    参考:http://www.cnblogs.com/see7di/archive/2011/06/17/2239722.html 内容如下: 理解linux下的 eth0,eth1,eth2,lo 网 ...

  5. ffmpeg 时间戳

    转http://blog.csdn.net/yfh1985sdq/article/details/5721953 AVpacket里的时间戳pts和dts.单位好像是us. 问 : 时间戳pts和dt ...

  6. Maven插件开发教程收集(待实践)

    官方教程:http://maven.apache.org/plugin-developers/index.html http://blog.csdn.net/csfreebird/article/de ...

  7. excel转换html

    利用POI解析excel,转换成html,支持各种版本的excel.支持自定义样式.支持行列合并 需要用到的jar public class Excel2Html { /** * 读取Excel并转换 ...

  8. QML 开发神奇加成之为网络资源设置本地缓存

    QML 开发神奇加成之为网络资源设置本地缓存 直接上码: #include <QNetworkAccessManager> #include <QNetworkDiskCache&g ...

  9. Oracle 12c agent install for linux

    安装Agent代理 在EM11g时,agent安装是通过在被监制主机端下载agent代理并安装,在EM12c版本号上,能够在EM12c服务端.通过"推送"的方式把agent代理在远 ...

  10. 【转】Linux cp -a用法

    cp file1 file1-bk  ---------> 这样复制备份的话文件的属性(创建时间这些会变化) 要想不变化, cp -a  file1 file-bk  加上一个 -a 这个参数就 ...