都说学习 webpack要是连module、chunk、bundle的关系都混淆分不清，都不敢说你学习过webpack？🙄
但对于刚开始研究其原理的很多同学确实分不清，比如我😭，看官网的解释看完更是一头雾水，网上的各种资料的解释也只是文字的生硬堆积泛泛而谈。今天争取让你一张图、几行字就明白他们的关系，话不多说 先上图
灵魂图解
灵魂文解
-
对于一份同逻辑的代码，当我们手写下一个一个的文件，它们无论是
ESM还是CMD或是AMD，他们都是module； -
当我们写的 module 源文件传到 webpack 进行打包时，webpack 会根据文件引用关系生成
chunk文件，webpack 会对这个 chunk 文件进行一些操作； -
webpack 处理好 chunk 文件后，最后会输出
bundle文件，这个 bundle 文件包含了经过加载和编译的最终源文件，所以它可以直接在浏览器中运行。 -
正常来说，
一个chunk对应一份bundle,但是我们通常会有代码分割的场景，所以会产生多个bundle,所以这三者的对应关系是：
- 一个
module对应一个或多个chunk(一个文件被多个文件同时引用)- 一个chunk对应
至少一个或多个bundle
一句话总结
module，chunk 和 bundle 其实就是同一份逻辑代码在不同转换场景下取的三个名字：
- 我们直接写出来的是
module - webpack 处理时是
chunk - 最后生成浏览器可以直接运行的
bundle
怎么样，这下懂了吧？😏
整理不易，如果你看懂了，不妨给作者点个小赞呗(#^.^#)
《Webpack配置从基础到高阶系列专栏》文章推荐
《重学JavaScript系列专栏》其它文章推荐：
- 发布订阅者模式原来是这样 “搞事情” 的！
- script 和 async 和 defer到底啥区别？
- TypeScript类型体操之Partial、Required、Pick、Omit、Readonly
- 你家3岁小孩也能看懂的防抖和节流
- 手动模拟实现call、apply和bind方法---call和apply方法实现
- 手写call、apply、bind方法---bind方法实现
《手撕源码系列专栏》文章推荐
参考文档
