webpack 的作用是将源代码编译（构建、打包）成最终代码，对于webpack的打包过程，我们大概可以分为三步走：

初始化化阶段

对于此阶段，webpack会将cli参数、配置文件、默认配置进行融合，形成一个最终的配置对象。

cli参数:在cmd环境下，npx webpack –mode=development。
配置文件：就是你文件webpack.config.js中一些配置。

编译阶段

1.创建chunk

根据入口模块（默认./src/index.js)创建一个chunk，每个chunk都至少有两个属性。
（1）name:默认为main
（2）id:唯一编号，开发环境和name相同，生产环境是一个数字，从0开始

chunk：webpack内部构建模块的块，一个chunk中包含多个模块，这些模块是从入口模块通过依赖分析得来的。

2.通过入口文件构建依赖模块

（1）找到入口模块文件，检查是否有记录(这里的记录可以理解为一个模块记录，表格形式），如果你加载过此模块，那么直接从记录中拿，没有，则进行下一步（没懂这东西哪里来的可以先往下看）

（2）读取你模块文件的内容，通过语法分析，将你模块的内容转化为一个AST（抽象语法树），拿到此模块所有的依赖模块

（3）将拿到的依赖模块保存到dependencies（这兄弟可以理解为一个字符串数组，但肯定没那么简单）

（4）替换依赖函数。在你index模块中，需要加载你的a模块，你的b模块，它会将你的模块代码变为
下图那种模式，

（5）将你转换后的代码进行保存，保存到第一步提到的那个模块记录缓存中，它里面类似一个表的形式，保存的是你模块id，以及模块id所对应的转换后的代码，转换后的代码是字符串代码（没构想出来看看后面流程图）

（6）根据dependencies的内容递归加载依赖模块，将依赖模块全部存入你的模块记录中去。

模块记录：就如果你的index模块依赖b模块，你的a模块也依赖b模块，那么在你下一次加载a模块的时候，就不用再去走上面的流程，而直接从缓存中那，岂不妙哉。

看图走一遍流程：

3.产生chunk assets

在第二步完成后，chunk中会生成一个模块列表，列表中包含你的模块id和转换后的代码 ，接下来，webpack会根据配置生成一个资源列表，chunk asstes（资源列表，可以理解为是生成到最终文件的文件名和内容），为啥要叫列表呢，如果你的配置配置了 devtool: “source-map”，在打包后会在你的dist目录下生成一个main.js和main.js.map，它可能是一个资源，也可能是多个，所以叫列表。

hash：一种算法，特点是将一个任意长度的字符串转换为一个固定长度的字符串，而且可以保证原始内容不变，产生的hash字符串就不变。

4.合并chunk assets

将多个chunk的assets合并到一起，并产生一个总的hash。（如果你的配置文件中配置的chunk为多个，就会有产生多个chunk，每个chunk都会有自己的chunk hash，将这些chunk合并，产生一个总hash）。

注意：如果你入口配置为两个chunk，最终只输出到一个文件夹，那么就会报错，如下，你的webpack.config.js中配置了两个chunk，最终输出到你的main.js文件下就会报错。

报错信息：冲突：将多个资源发送到同一个文件中。解决的办法就是在你的webpack.config.js中配置你的输出用

输出

webpack将利用node的fs模块（文件处理模块），根据编译产生的总的assets（资源总表里面的文件名，文件内容）来生成相应的文件

最后，我们来看看webpack打包后在cmd中的那些输出吧：

hash：你的总资源列表生成的hash
version：你的webpack版本
time：打包时间
下面是总表：输出文件，资源大小，Chunks，Chunk Names

（是不是有点看的懂啦，哈哈哈哈）

总过程

上面差不多就是webpack的一个编译过程，新手上路，如果错误，请包含，谢谢！