这是我参与更文挑战的第13天,活动详情查看: 更文挑战
前言
在学习 webpack 的过程中,难免会遇到一些 webpack 专用的概念(术语),webpack 官方还专门在写了个 “术语表” 文档。
其中最常见出现的术语有 Module
、Chunk
、Bundle
,这三个概念很重要,要学好 webpack 和看懂 webpack 的文档,就必须懂得这三个概念,在官方文档里也有解释,不过估计你看了和我当初一样懵逼。
这篇文章重点介绍 Module
、Chunk
、Bundle
,其他概念暂不做介绍,有需要的可以看看官方的 术语表。
Module、Chunk、Bundle
官方解释
- Module
Module 是离散功能块,相比于完整程序提供了更小的接触面。精心编写的模块提供了可靠的抽象和封装界限,使得应用程序中每个模块都具有条理清楚的设计和明确的目的。
- Chunk
此 webpack 特定术语在内部用于管理捆绑过程。输出束(bundle)由块组成,其中有几种类型(例如 entry 和 child )。通常,块 直接与 输出束 (bundle)相对应,但是,有些配置不会产生一对一的关系。
- Bundle
Bundle: bundle 由许多不同的模块生成,包含已经经过加载和编译过程的源文件的最终版本。
wtf!!!......w(゚Д゚)w
是不是越看越糊涂......
我的理解
这里不写 webpack 的配置示例代码,假设 webpack 项目已经是具备打包各个 js、css 等等能力,下面只做简单描述。
项目里有一个 index.js,引用了 index.css。
index.js
import './index.css'
项目里还有一个什么都没有引入的 header.js。
当 webpack 打包后,webpack 会生成目标文件 index.bundle.js、index.bundle.css、header.bundle.js。
有人会习惯命名为 xxx.bundle.js,这里也用这种格式来区分源文件和最终打包文件。
Module
Module 其实就是我们所写的源代码,最开始写的 index.js、header.js、index.css 都是我们的 Module。
Chunk
Chunk 是最难理解的。Chunk 是只存在构建过程中的产物,你可以认为它其实就是找到一个 js 里所有引入的依赖并将所有的依赖捆绑到这个 js 里,构建成了一个叫 Chunk 的东东。
如示例,webpack 构建过程中,由于 index.js 引入了 index.css,index.js 就会和 index.css 合并变成一个 chunk;由于 header.js 什么都没有引入,它自身变成了另一个 chunk,所以在构建的过程中,这里存在两个 chunk。
Bundle
Bundle 就更加好理解了,它就是打包后的最终产物,我们要部署的项目文件就是 Bundle。回到示例里,index.bundle.js、index.bundle.css、header.bundle.js 的打包文件都是我们的 Bundle。
三者关系
我们可以看到三者均不是1对1关系。
三者其实都是实现同一套逻辑的东西,只是在不同的过程所起不同的名称。
Module 是构建前的源码,Chunk 是构建中的捆绑产物,Bundle 是构建后的运行代码。
参考
- webpack 中,module,chunk 和 bundle 的区别是什么?(强烈推荐看看)
- What are module, chunk and bundle in webpack?
- 官方文档的 术语表
系列文章
webpack5 的使用(零):概念
webpack5 的使用(一):起步
webpack5 的使用(二):多个环境配置
webpack5 的使用(三):加载 css
webpack5 的使用(四):加载资源文件
webpack5 的使用(五):babel 转译 js 代码
webpack5 的使用(六):优化