参考：https://www.cnblogs.com/skychx/archive/2020/05/18/webpack-module-chunk-bundle.html

    • module - 各个源码文件，webpack中一切皆模块。
    • chunk - 多个模块合并成的，如entry内定义的、import()引入的、splitChunk拆分代码块的时候
      • chunk通过入口文件，进行依赖分析，然后把需要的依赖统一在一个chunk中
    • bundle - 最终的输出文件

    image.png

    1. 对于一份同逻辑的代码，当我们手写下一个一个的文件，它们无论是 ESM 还是 commonJS 或是 AMD，他们都是 module ；
    2. 当我们写的 module 源文件传到 webpack 进行打包时，webpack 会根据文件引用关系生成 chunk 文件，webpack 会对这个 chunk 文件进行一些操作；
    3. 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