Webpack 一些概念

yezitoo 2019-12-20

目录

引子

打包工具有多种,实际中 webpack 接触的比较多,目前中文文档跟英文文档有些对不上,其中有些概念比较分散,对此进行集中的整理。

Dependency Graph

任何时候,一个文件依赖于另一个文件,webpack 把这种情况视为依赖关系。这让 webpack 可以接受非代码资源,例如图片或字体,并且可以将它们作为依赖提供给你的应用程序。

当 webpack 处理你的程序时,可能是从命令行或配置文件中定义的一系列模块开始。从入口文件开始,webpack 递归地构建一个依赖图(Dependency Graph),这个依赖图包含着应用程序所需的每个模块,并生成一个或多个 bundle ,可由浏览器加载。

Runtime

  • runtimemanifest 数据,基本上是在浏览器运行时,webpack 用来连接模块化应用程序所需的所有代码。
  • 它包含在模块交互时连接它们所需的加载和解析逻辑。这包括连接已经加载到浏览器中的模块,以及延迟加载尚未加载的模块的逻辑。

Manifest

  • manifest 作为名词时,中文意思是:(船或飞机的)货单,旅客名单
  • 当编译器进入、解析和映射你的应用程序时,它会在你的所有模块上保留详细的信息,这个数据集合称为“manifest”。
  • 当完成打包并发送到浏览器时,runtime 会通过 manifest 来解析和加载模块。
  • 无论你选择哪种模块语法,那些 importrequire 语句现在都已经转换为 __webpack_require__ 方法,此方法指向模块标识符(module identifier)。

Module、Bundle、Chunk

Module

  • 比完整程序更小的接触面的分离的块(chunk)功能,使得验证、调试、测试轻而易举。
  • 精心编写的模块提供了可靠的抽象和封装边界,构成了连贯的设计和清晰易懂的目的。

Bundle

  • 作为名词时,意思是:(一)捆,包,扎。
  • 从多个不同的模块产生,包含已经加载和编译过程的源文件的最终版本。
  • 个人理解就是一些相关联的包打包成的一个文件。

Chunk

  • 作为名词时,意思是:块,组块,话语组成部分。
  • 这个 webpack 中特定术语在内部用于管理打包过程。
  • bundleschunks 组成,其中有多种类型(例如入口)。
  • 通常,chunks 与输出 bundles 直接对应,但是,有些配置不产生一对一关系。

Bundle Splitting

  • 这个过程提供了一种优化构建的方法,允许 webpack 为单个应用生成多个 bundle
  • 它可以将每个包的更改隔离开来,而不影响其它包。
  • 这样利用浏览器的缓存,可以减少需要重新发布和客户端下载的代码量。

Code Splitting

指将代码分成不同的 bundles/chunks ,然后可以按需加载,而不是加载包含所有内容的单个 bundles

Tree Shaking

  • 消除多余和未使用的代码。
  • webpack 通过分析各种导入语句和导入代码的使用,以确定实际使用的依赖项,删除不属于“tree”的一部分。

Output Filename

webpack 提供了一种使用称为 substitution (可替换模板字符串) 的方式,通过带括号字符串来模板化文件名。

模版描述
[hash]模块标识符的 hash。修改一个模块,其它模块生成的 hash 都会变。
[contenthash]文件内容的 hash,每个都不相同。只有改变了内容的文件的 hash 才会变。
[chunkhash]chunk 内容的 hash。一个文件改变,其关联的文件 hash 也会变。
[name]模块的名称
[id]模块标识符
[query]模块的 query,例如文件名 ? 后面的字符串
[function]返回文件名称的方法

参考资料

相关推荐