一、webpack的构成
- entry 代表项目的入口
- module 开发中,每一个文件可以看作一个module
- chunk 代码块
- loader 模块转化器
- plugin 扩展插件,自定义webpack打包过程
- bundle 最终打包完成的文件
二、webpack运行的流程
- 参数初始化。根据配置文件webpack.config.js和shell语句中读取与合并参数
- 开始编译。初始化一个compiler对象,加载所有插件,执行对象的run()方法开始编译。
- 确定入口文件。根据项目配置,找到所有的入口文件。
- 识别模块
- 编译模块(打包代码)。从入口开始,调用配置的loader对模块进行编译。模块编译完成后,得到模块被转化后的最后内容和他们之间的依赖关系。
- 资源输出。根据入口文件和模块的依赖关系 ,组成chunk文件(一个chunk可能包含多个模块),每一个chunk会被转化成一个单独的文件加入输出列表中。
- 输出。根据配置的输出参数(路径和文件名),将输出内容写入文件系统。
总结:可以简单理解为,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