初始化参数
从配置文件(默认为webpack.config.js
)和 Shell语句
中读取与合并参数,得出最终的参数。
如果使用命令行工具(如npm script
或npx
),则会将命令行参数传递给webpack()函数
,该函数是webpack的主要入口点。
入口点确定
Webpack从配置文件中读取入口点(entry
),这些入口点通常是项目所有的入口文件,如src/index.js
。
这些入口文件是webpack编译的起点。
分析依赖(解析依赖模块)
Webpack从入口文件开始,使用解析器(resolver)来解析模块。解析器会查找模块的位置并读取模块的内容。
当Webpack遇到import、require等模块导入语句时,它会将这些语句作为依赖记录下来,并递归地解析这些依赖模块。
构建依赖图
在解析模块的过程中,Webpack会构建一个依赖图(dependency graph)。这个图是一个表示项目中所有模块和它们之间依赖关系的图。
每个模块在图中都是一个节点,模块之间的依赖关系通过边来表示。
编译代码(处理Loader)
在解析模块的过程中,如果模块的内容不是JavaScript,或者需要进行转换(如将TypeScript转换为JavaScript,将CSS转换为JavaScript等),Webpack会使用配置的Loader来处理这些模块。
Loader可以将模块的内容从一种格式转换为另一种格式,以便Webpack能够理解和处理。
插件介入
在分析依赖的过程中,Webpack的插件系统允许插件介入并修改依赖图。
插件可以添加、删除或修改图中的节点和边,从而改变Webpack对依赖关系的理解。
优化和分割
在构建依赖图之后,Webpack会进行一些优化和分割操作,如代码分割(code splitting)、公共库分离(commons chunk splitting)等。
这些操作可以进一步减少最终构建文件的大小,提高加载性能。
打包模块(生成资源)
在所有依赖都被分析并优化之后,Webpack会根据配置将模块打包成最终的资源文件(如JavaScript文件、CSS文件等)。
这些资源文件包含了项目中所有必要的代码和依赖,并且已经过优化和压缩,以便在浏览器中快速加载和执行。
.