Webpack 概览

123 阅读2分钟

Babel 是如何转化代码的?

  1. parse:把 code 变成 ast。
  2. traverse:遍历 ast 进行修改。
  3. generate:把经过修改的 ast 变成 code2。

ES6 的 import & export 有什么问题?

  1. 兼容问题:在现代浏览器中,可以通过 script type="module" 来使用,但是在低版本或者是 IE 浏览器上,就不支持这种语法。
  2. 性能问题:一个模块就需要请求一个 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 非常容易,只需要监听合适的事件,执行逻辑即可。