module、chunk、bundle都是webpack中的术语。那么他们究竟是什么呢？对于这3个名词感觉他们都在说打包文件，但是具体细节的区别呢？希望通过本文大家对此有细致的了解。
一、术语的解释
1.module是什么？
官方概念：Module是离散功能块，相比于完整程序提供了更小的接触面。精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。
module其实就是一个文件或者文件内通过import等方式引用代码块或第三方等均可认为是一个module，也就是说任何一个可以被导入导出的文件都是一个模块。
2.chunk是什么？
官方概念：Chunk此webpack特定术语在内部用于管理捆绑过程。输出束（bundle）由块组成，其中有几种类型（例如entry和child）。通常，块直接与输出束(bundle）相对应，但是，有些配置不会产生一对一的关系。
当我们写的module源文件传到webpack进行打包时，webpack会根据文件引用关系生成chunk文件，webpack会对这个chunk文件进行一些操作。
3.bundle是什么？
官方概念：bundle由许多不同的模块生成，包含已经经过加载和编译过程的源文件的最终版本。
webpack处理好chunk文件后，最后会输出bundle文件，这个bundle文件包含了经过加载和编译的最终源文件，所以它可以直接在浏览器中运行。通常我们会弄混这两个概念，以为Chunk就是Bundle，Bundle就是我们最终输出的一个或多个打包文件。大多数情况下，一个Chunk会生产一个Bundle。
二、案例演示
从定义来说：
“模块”(module)的概念大家都比较熟悉，如CommonJS模块、AMD、ES6Modules模块。
chunk表示打包的时候产生的模块，由他来组成bundle。
打包完成的源代码。
我们现在就只创建一个webpack配置，步骤如下：
1.创建一个空文件夹，并且在当前文件夹下打开cmd。
2.npminit-y生成package.json。
3.执行npmiwebpackwebpack-cli-D,安装webpack的包。
4.创建src，在src内部创建index.html、index.js、index.css、utils.js、