深入webpack源码（二）webpack初始化

打开webpack4.x目录下的package.json，会看到main字段的值为lib/webpack.js，该文件就是webpack的入口模块。

模块导出

该模块除了导出version和各种插件外，还定义了webpack这个函数，这就是webpack初始化的函数。

导出的各种内置插件：

导出的插件会挂到webpack的不同属性上

同时对于两个过时的即将在webpack5中删除的插件optimize.UglifyJsPlugin和optimize.CommonsChunkPlugin的get方法做了处理，在使用时会抛出一个RemovedPluginError的错误。

webpack初始化函数

接下来我们看一下webpack函数，

这个函数接受两个参数options和callback，options就是我们的自定义配置，callback是在webpack打包完之后调用的回调函数。

这个函数主要流程是：根据schema校验options，处理options参数生成Compiler，处理callback参数，然后返回compiler。

校验options

校验options是使用ajv这个库，根据定义的schema的json文件来校验。

在webpack目录下有一个schema目录，下面存放着各种schema文件。主要是webpack的options schema和各种插件的options schema。

ajv.absolutePath.js是对ajv的校验规则做了一些处理，对绝对路径中的“!”做了限制，为了防止和loader 的语法的冲突。细节可以不用过多关心。

如果options校验失败，会抛出WebpackOptionsValidationError，然后中止初始化流程。

处理options和创建Compiler

校验完options，会根据options的类型做不同的处理：

如果是数组则对每一个options元素分别调用webpack函数。

如果是对象则设置默认值，创建Compiler并设置options。之后调用NodeEnvironmentPlguin，然后初始化options.plugins中的每一个plugin。

如果是函数则以compiler为上下文调用，否则调用它的apply方法，传入compiler对象作为参数。这说明webpack的plugin支持function和对象两种，不过常见的plugin都是类的形式，使用时new一个plugin的对象，因为多数plugin都是可以有多个实例的。

之后调用environment和afterEnvironment的hooks函数，这里涉及到webpack的插件机制，接下来调用WebpackOptionsApply会对options做处理，应用各种内置的插件。

插件机制、WebpackOptionsDefaulter和WebpackOptionsApply的逻辑后面会有单独的文章详细介绍。

处理callback参数

接下来是对callback参数的处理，如果传入的callback不是function，则会抛出一个Error，中止后续处理。如果传入的options中的watch为true，则调用compiler的watch方法，把options.watchOptions传入。否则的话调用run方法。

可以看到，如果传入了callback，run或者watch是会自动调用的，否则会返回compiler，需要手动调用run或watch。

总结

webpack这个模块导出了webpack、version和一堆的内置插件。webpack函数就是初始化的函数，会对options做校验、处理options、创建Compiler，处理callback来调用compiler的run或者watch方法，最后返回Compiler。

详细流程参考下图：

webpack初始化流程