Webpack机制、原理简单小结

一、webpack的构成

1. entry  代表项目的入口
2. module  开发中，每一个文件可以看作一个module
3. chunk  代码块
4. loader  模块转化器
5. plugin  扩展插件，自定义webpack打包过程
6. bundle  最终打包完成的文件

二、webpack运行的流程

1. 参数初始化。根据配置文件webpack.config.js和shell语句中读取与合并参数
2. 开始编译。初始化一个compiler对象，加载所有插件，执行对象的run()方法开始编译。
3. 确定入口文件。根据项目配置，找到所有的入口文件。
4. 识别模块
5. 编译模块（打包代码）。从入口开始，调用配置的loader对模块进行编译。模块编译完成后，得到模块被转化后的最后内容和他们之间的依赖关系。
6. 资源输出。根据入口文件和模块的依赖关系 ，组成chunk文件（一个chunk可能包含多个模块），每一个chunk会被转化成一个单独的文件加入输出列表中。
7. 输出。根据配置的输出参数（路径和文件名），将输出内容写入文件系统。

总结:可以简单理解为，webpack要做的就是分析代码、转换代码、编译代码、输出代码。

三、本质

webpack是一个机制，一个打包的机制。

参考：

http://imweb.io/topic/59324940b9b65af940bf58ae

https://juejin.im/entry/5b0e3eba5188251534379615

https://juejin.im/post/5adab998f265da0ba5671cea

http://taobaofed.org/blog/2016/09/09/webpack-flow/

https://www.jianshu.com/p/e24ed38d89fd

https://blog.csdn.net/baozhiqiangjava/article/details/80603509

https://zhuanlan.zhihu.com/p/32093510

https://www.cnblogs.com/zhuzhenwei918/p/7265971.html

https://fengmiaosen.github.io/2017/03/21/webpack-core-code/

https://cloud.tencent.com/developer/article/1015527