面试官：npm run xxx的时候，发生了什么？讲的越详细越好。 我（嘿嘿，稳了，这次我要30k）: 嘻嘻！

webpack本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是Tapable，webpack中最核心的负责编译的Compiler和负责创建bundles的Compilation都是Tapable的实例。本文主要介绍一下Tapable中的钩子函…

TreeShking 是通过静态分析的方式找出源码中不会被使用的代码进行删除，达到减小编译打包产物的代码体积的目的。 JS 我们会用 Webpack、Terser 进行 TreeShking，而 CS

手写webpack tapable源码，new Function动态生成函数执行体，Hidden Class、单态性在tapable源码中的使用

webpack的成功之处，不仅在于强大的打包构建能力，也在于它灵活的插件机制。 也许你了解过webpack的插件与钩子机制；但你或许不知道，webpack内部拥有超过180个钩子，这些钩子与模块（内置插件）之间的「创建」「注册」「调用」关系非常复杂。因此，掌握webpack内部…

经过上一篇博客分析webpack从命令行到打包完成的整体流程，我们知道了webpage的plugin是基于事件机制工作的，这样最大的好处是易于扩展。社区里很多webpack的plugin，但是具体到我们的项目并不一定适用，这篇博客告诉你如何入手写一个plugin，然后分析源码相…

JavaScriptParser是把js源码转化为抽象语法树的解析器。常用的JavaScript Parser： 其中webpack就是使用的acorn将源代码解析成AST进行操作。 loader是webpack用来处理加载不同资源文件的插件，它只在webpack对资源文件进行…

说起编译原理，可能我们脑海中首先浮现的就是 “编译器” 这个词汇。维基百科上对编译器的定义是：编译器是一种计算机程序，它会将某种编程语言写成的源代码（原始语言）转换成另一种编程语言（目标语言）。 通常一个编译器的编译过程会经过词法分析、语法分析、语义分析、生成中间代码、优化、生…

需要读到入口文件里面的内容。 分析入口文件，递归的去读取模块所依赖的文件内容，生成AST语法树。 我们创建了add.js文件和minus.js文件,然后 在index.js中引入，再将index.js文件引入index.html。 现在我们打开index.html。你猜会发生什…