写给自己的 JavaScript 知识点拾遗 - 3

在理论上,Webpack 是一个预编译模块方案。在实际中,我们讨论的更多的是我们所以实际使用的那个工具。这并不冲突。这里很多知识点都来自我看的《深入浅出 Webpack》一书,不用做商业用途,只是自己总结在这里。

Webpack 简单来讲是一个模块打包器,递归项目中所有的模块,生成打包后的文件。

比较关键的几个概念有:

  • Entry:构建入口。
  • Module:模块,一个文件对应一个模块,Webpack 会从配置的 Entry 开始递归找出所有的模块。
  • Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码的合并与分割。
  • Loader:模块转换器,用于把模块原内容转换成新的内容,每个 Loader 都有自己单独的作用,功能单一。Loader 就像一个翻译员,能把源文件经过转化输入新的结果,并且一个文件可以链式的经过多个翻译员翻译。
  • Plugin:扩展插件,用于在构建流程中的特定时机注入扩展逻辑来影响构建的结果。Webpack 通过 plugin 让构件流程更加的灵活,来适应各种场景。Webpack 运行的声明周期中会广播许多事件,Plugin 可以监听这些事件,进而介入到构建过程中改变输入的结果。
  • Output:输入结果,经过一系列的处理之后得到的结果。

Webpack 启动后会从 Entry 里配置的 Module 开始递归解析 Entry 依赖的所有 Module。 每找到一个 Module, 就会根据配置的 Loader 去找出对应的转换规则,对 Module 进行转换后,再解析出当前 Module 依赖的 Module。 这些模块会以 Entry 为单位进行分组,一个 Entry 和其所有依赖的 Module 被分到一个组也就是一个 Chunk。最后 Webpack 会把所有 Chunk 转换成文件输出。 在整个流程中 Webpack 会在恰当的时机执行 Plugin 里定义的逻辑。

构建流程

  1. 初始化:启动构建,读取与合并配置参数,加载 Plugin,实例化 Compiler。
  2. 编译:从 Entry 出发,对每个 Module 串行调用对应的 Loader 去转化文件内容,早找到该 Module 以来的 Module,递归地进行编译处理。
  3. 输出:对编译后的 Module 组合成 Chunk,把 Chunk 转换成文件,输出到文件系统。