玖叶教程网

webpack的构建流程是什么?

开始之前先来看一下webpack的6大核心概念

• Entry，入口，这是Webpack执行构建的第一步，可理解为输入。
• Module，模块，在Webpack中一切皆模块，一个模块即为一个文件。Webpack- 会从Entry开始递归找出所有的依赖模块。
• Chunk，代码块，一个Chunk由多个模块组合而成，它用于代码合并与分割。
• Loader，模块转换器，用于将模块的原内容按照需求转换成新内容。
• Plugin，扩展插件，在Webpack构建过程的特定时机注入扩展逻辑，用来改变或优化构建结果。
• Output，输出结果，源码在Webpack中经过一系列处理后而得出的最终结果

构建流程

webpack是一个串行的过程，从启动到结束会依次执行以下流程

初始化参数

从shell参数和配置文件合并参数，得出最终的参数

每次在命令行输入 webpack 后，操作系统都会去调用 ./nodemodules/.bin/webpack 这个 shell 脚本。这个脚本会去调用 ./nodemodules/webpack/bin/webpack.js 并追加输入的参数，如 -p , -w

在 webpack.js 这个文件中 webpack 通过 optimist 将用户配置的 webpack.config.js 和 shell 脚本传过来的参数整合成 options 对象传到了下一个流程的控制对象中。

开始编译

从上一步获得的参数初始化compiler对象，加载所有的插件，通过run方法执行编译。

function webpack(options){
 var compiler = new Compiler ();
 ... // 检查options,若watch字段为true,则开启watch线程

 return compiler
 ;
}

确定入口

在创建 module 之前，Compiler 会触发 make，并调用 Compilation.addEntry 方法，通过 options 对象的 entry 字段找到我们的入口js文件

编译模块

从入口文件开始，调用所有配置的loader对模块进行翻译成compliation，然后递归所有依赖的模块，重复编译。得到每个模块翻译后的最终内容以及它们之间的依赖关系。

可以分为三个部分帮助记忆

• 调用各 loader 处理模块之间的依赖
• 调用 acorn 解析经 loader 处理后的源文件生成抽象语法树 AST
• 遍历 AST，构建该模块所依赖的模块

输出资源

根据入口和模块的依赖关系，组装成一个个包含多个模块的chunk，然后将chunk转换成一个单独的文件加入输出列表，这是可以修改输出内容的最后机会

输出完成

在确定好输出内容后，根据配置确定输出的路径和文件名，将文件的内容写入文件系统上

最后上一张图片