webpack原理

webpack出现的原因

模块的加载和传输过程中，若每个模块都请求一个，这样会由于请求次数过多，导致启动速度过慢。若是把所有模块打包成一个文件只请求一次，会导致文件太大，每次请求都会消耗很大的流量。最好的方式是把代码块按块区分，按需进行懒加载，按需懒加载就需要对代码块进行静态分析，编译打包，这就是webpack所要做的工作。

webpack的原理

对各个模块之间的依赖关系进行静态分析，然后将这些模块按照一定的规则生成对应的静态资源。

entry: 入口文件, webpack执行构建的第一步将从Entry开始，可抽象成输入
output: 输出结果，再webpack经过一些列处理并得出最终想要的代码后输出结果
module: 模块，在webpcak中一切皆模块，一个模块对应一个文件。webpack会从配置的Entry开始递归找出所有依赖的模块。
loaders: 模块转换器，将不同类型的文件进行处理，例如less、sass文件转换成css，typeScript转换成js
plugin: 扩展插件，在webpack构建过程实现扩展逻辑，来改变构建结果和做我们想要做的事情
chunk: 代码块，一个Chunk由多个模块组合而成，用于代码合并于分割

webpack工作流程

webpack启动后会从Entry文件的Module开始构建，递归解析这个Entry依赖的所有Module，每找到一个Module就会根据配置的Loader去找相应的转换规则，对Module进行转换之后，再解析出当前Module依赖的Module。这些Module会以Entry为单位进行分组，一个Entry及其所有依赖的Module被分到一个组也就是一个Chunk。最后，Webpack会将所有的Chunk转换成对应的Bundle文件输出，再整个流程中，Webpack会在恰当时机执行Plugin里定义的逻辑。

关于mainifest.bundle.js

这个文件是最先加载的，负责解析webpack打包的其他bundle文件，使其按要求进行加载和执行。