Babel 是如何转化代码的?
- parse:把 code 变成 ast。
- traverse:遍历 ast 进行修改。
- generate:把经过修改的 ast 变成 code2。
ES6 的 import & export 有什么问题?
- 兼容问题:在现代浏览器中,可以通过
script type="module"
来使用,但是在低版本或者是 IE 浏览器上,就不支持这种语法。 - 性能问题:一个模块就需要请求一个 js 文件,当我们的项目很大的时候,依赖关系是非常复杂的,那么当用户打开页面的时候,很有可能会发送非常多的 js 请求,这个体验肯定是不好的。 Webpack 作为一个打包器,就具有转译这两个关键字的能力,并且把所有文件打包成一个文件。
Webpack 最终生成的 bundle 是个什么东西?
简单来说,bundle 文件应该包含了所有模块,它会从入口文件开始执行,由于模块的 ESModule 会被编译成 CommonJS,所以在执行时,会向模块传递 require
, exports
这些函数。
Webpack 为什么需要 Loader?
因为 Webpack 的机制中,一个模块只有是 JS 代码时,才可以被运行。而对于一个 CSS 文件,Webpack 并不知道怎么去运行它,所以 Webpack 需要 Loader 来处理一些无法直接运行的文件,或者是想对文件做一些处理。比如要让一个 CSS 文件生效的话,相当于就是在页面上创建一个 style 标签,然后把这个 CSS 文件的内容插入即可。
Tapable 是什么?
有点像 eventBus
,webpack 团队写的一个事件监听/触发的库。webpack 整体的执行过程中,所有阶段都是 Tabpable 的一个事件,由内部和外部监听对应的阶段,执行逻辑。
Webpack 的编译发生在哪个阶段?
是 webpack 的 make 阶段,webpack 本身没有逻辑,只是内置了一些 Plugin,EntryPlugin 监听了这个阶段,负责处理入口文件。
Webpack Plugin 是怎么工作的?
由于 Webpack 是基于 Tapable 的架构,内部的逻辑也是通过 Plugin 实现的,所以编写 Plugin 非常容易,只需要监听合适的事件,执行逻辑即可。