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文件,使其按要求进行加载和执行。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章