Webpack Concept

[XXHolic]

目录

• 引子
• Dependency Graph
• Runtime
• Manifest
• Module、Bundle、Chunk
• Bundle Splitting
• Code Splitting
• Tree Shaking
• Output Filename
• 参考资料

引子

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

Dependency Graph

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

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

Runtime

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

Manifest

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

Module、Bundle、Chunk

Module

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

Bundle

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

Chunk

• 作为名词时，意思是：块，组块，话语组成部分。
• 这个 webpack 中特定术语在内部用于管理打包过程。
• bundles 由 chunks 组成，其中有多种类型（例如入口）。
• 通常，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]	返回文件名称的方法

Back to top :arrow_up:

参考资料

• Webpack
• Webpack Glossary
• What are module, chunk and bundle in webpack?

:wastebasket:

以下是一些无关紧要的内容。 记得之前看《哆啦A梦：伴我同行》剧场版，里面出现了大雄一行人长大后的样子，里面的风格很中规中矩，最近看到另外一种风格的成长形象： 大雄 ![51-dx][url-local-dx] 静香 ![51-jx][url-local-jx]