首页 > 技术文章 > 大前端工程化之webpack构建流程

vonlin 2022-02-12 14:42 原文

webpack简单来讲就是一个打包器(bundler),负责将js应用程序的所有静态资源打包输出到一个文件中,不管你使用的是何种框架或程序中使用的任何类型的资源,它都可以将他们打包成html,js,css,图片等等可以让浏览器解释执行的资源。

现如今一个js程序可以是很大的,程序开发中会引用很多的各种类型的资源,并且各个模块中会存在错综复杂的依赖,那么webpack是如何识别并分析这些依赖,然后很准确的打包成最终资源呢,我们简单说一下webpack的构建流程吧

webpack的构建流程可以看做一条流水线,在运行过程中会处理特定的任务,并且所有的构建任务都是串行的

  1. 初始化构建所需参数:这些参数是配置在webpack.config.js,或者是执行时的命令行参数中,启动时首先会将这些参数合并得到最终的打包参数
  2. 开始准备编译:得到上面参数后webpack会初始化一个compiler对象,加载所有配置的插件
  3. 寻找入口文件:入口文件配置在配置文件中的entry属性
  4. 编译模块:webpack会从入口文件逐行分析,调用对应的loader对模块进行编译,如果遇到模块有依赖其他模块,则递归的执行本步骤,直到所有的模块都编译完毕
  5. 完成模块编译:经过第4步后就得到所有编译完成的模块,并生成所有模块的依赖关系图
  6. 输出资源:根据入口文件和模块之间的依赖关系,组装成许多个包含多个模块的chunk,再把每个chunk转成单独的文件添加到输出列表
  7. 输出完成:处理好了所有已经编译完的资源后,会根据配置中的文件输出路径和文件输出名,写入到文件系统中

 

在这个webpack构建流程中,webpack会广播很多构建中的事件,这就使得我们可以编写自己的一些插件,来实现我们自己的一些逻辑,后续再记录下如何编写一个webpack插件

有不对或不足的地方希望大家指正,一起好好学习webpack

推荐阅读