28.webpack——module、chunk和bundle的区别

最新推荐文章于 2023-12-22 11:47:56 发布

2024路在何方

最新推荐文章于 2023-12-22 11:47:56 发布

阅读量1k

点赞数 2

分类专栏：重学webpack——webpack5.0 文章标签： module chunk bundle 代码块 webpack

版权归作者所有，如需转载，请联系作者

本文链接：https://blog.csdn.net/qq_17175013/article/details/119753186

版权

32 篇文章 37 订阅

订阅专栏

【重学webpack系列——webpack5.0】

1-15节主要讲webpack的使用，当然，建议结合《webpack学完这些就够了》一起学习。
从本节开始，专攻webpack原理，只有深入原理，才能学到webpack设计的精髓，从而将技术点运用到实际项目中。
可以点击上方专栏订阅哦。

以下是本节正文：

module: 只要是文件，都是一个module
chunk：代码块，是webpack根据功能拆分出来的（chunk是无法在打包结果中看到的，打包结果中看到的是bundle），包含三种情况:
- 你的项目入口(entry)
- 通过import()动态引入的代码
- 通过splitChunks拆分出来的代码
bundle:bundle是webpack打包之后的各个文件，一般就是和chunk是一对一的关系，bundle就是对chunk进行编译压缩打包等处理之后的产出。

**chunk是无法在打包结果中看到的，打包结果中看到的是bundle**

另：在webpack5中，多了一个chunkgroup的概念：

- 比如有chunk1，chunk2，chunk3，chunk4
- 可以把chunk1和chunk2作为一个group
- 也可以把某个chunk，比如chunk3，拆分成两个chunk

如果比较抽象，可以看下面的图
在这里插入图片描述
看这个图就很明白了：

对于一份同逻辑的代码，当我们手写下一个一个的文件，它们无论是 ESM 还是 commonJS 或是 AMD，他们都是 module ；
当我们写的 module 源文件传到 webpack 进行打包时，webpack 会根据文件引用关系生成 chunk 文件，webpack 会对这个 chunk 文件进行一些操作；
webpack 处理好 chunk 文件后，最后会输出 bundle 文件，这个 bundle 文件包含了经过加载和编译的最终源文件，所以它可以直接在浏览器中运行。
一般来说一个 chunk 对应一个 bundle，比如上图中的 utils.js -> chunks 1 -> utils.bundle.js；但也有例外，比如说上图中，我就用 MiniCssExtractPlugin 从 chunks 0 中抽离出了 index.bundle.css 文件。

module，chunk 和 bundle 其实就是同一份逻辑代码在不同转换场景下的取了三个名字：

我们直接写出来的是 module，webpack 处理时是 chunk，最后生成浏览器可以直接运行的 bundle。

参考文章：https://www.cnblogs.com/skychx/p/webpack-module-chunk-bundle.html

关注