webpack系列目录

webpack命令启动原理

我们启动webpack通常是方法是在npm scripts中配置webpack命令，比如构建打包命令

"scripts" {
  "build": "webpack --config ./config/webpack.common.js --env production"
}
复制代码

1. webpack/bin/webpack.js

我们用webpack命令启动是借助了webpack-cli工具，当我们安装webpack时，webpack的package.json中有一行bin属性，那么npm会将bin里面的webpack属性名作为文件名，bin目录下的webpack.js这个文件里的作为内容的新的文件，复制到node_modules/.bin下面安装

所以当我们在执行webpack命令的时候，实际是执行webpack/bin/webpack.js这个文件。

我们看下webpack/bin/webpack.js这个文件，过程主要如下

首先会定义一个cli对象
当判断cli内installed属性是否为true
执行runCli

就是说它会先判断webpack-cli这个包是否安装，如果没有会进入条件安装，否则执行runCli，一般情况下我们在我也用命令打包会同时安装webpack和webpack-cli这两包，所以主要是看看runCli

1. 执行runCli

runcli里面主要做的是将cli里面的属性值进行拼接成路径，pkgPath就是webpack-cli/package.json，pkg就是webpack-cli/package.json对象，而webpack-cli/package.json内的bin属性的对应的webpack-cli属性值就是bin/cli.js

所以最后拼接的是webpack-cli/bin/cli.js这个路径，将调用这个文件

2. webpack-cli/bin/cli.js

1. 执行runCLI

这个文件其实主要执行的是runCLI，并且将命令后的参数一起传进去

这里调用了runCLI的引用来自bootstrap这个文件，我们来看下这个文件

3. webpack-cli/lib/bootstrap.js

1. 创建了WebpackCLI对象

2. 执行cli.run

而这个WebpackCLI来自webpack-cli.js

4.webpack-cli/lib/webpack-cli.js

run方法这里主要是执行了以下流程

1. 执行makeCommand

为了检查一些依赖包是否存在

2. 执行makeOption

makeCommand方法里面执行makeOption方法，对我们传入的参数做了进一步处理

3. 执行runWebpack

4. 执行createCompiler

而在runWebpack里面主要执行了createCompiler

5. 执行webpack

而在createCompiler里面主要调用webpack这个方法，而这个webpack方法就是来自webpack包

到这一步其实webpack已经打包完成了

webpack Compiler创建原理

在上述执行webpack函数创建了compiler，那这个是compiler是如何创建的呢，我们来看一下这个webpack方法。webpack来自webpack/lib/webpack.js

webpack/lib/webpack.js

在wepack方法里面可以看到，不管是否有回调都会调用create返回compiler

1. 执行create

在create方法中主要执行了createCompiler创建了compiler

2. 执行createCompiler

而在createCompiler主要做了

new了一个Compiler对象
plugin.apply注册了所有的插件
调用了environment和afterEnvironment环境hook
调用new WebpackOptionsApply().process将配置属性转为plugin注册
返回compiler

3. 执行compiler.run

在webpack方法内首先会判断是否有callback回调，如果存在回调会执行compiler.run，如果不存在直接返回compiler，所以我们在外面在执行webpack方法获取compiler后，我们即可以传入一个回调方法，也可以调用run方法。

webpack/lib/WebpackOptionsApply.js

1. 插件注入plugin.apply()

在webpack中的createCompiler里我们调用了new WebpackOptionsApply().process，我们来看看这里到底怎么实现将配置属性转为plugin注册

其实在process方法中，我们将传入的属性转成webpack的plugin注入到webpack生命周期内，如上图展示的部分属性做判断，存在就将内置的Plugin进行导入(所以plugin事实上贯穿webpack的整个构建流程)，其实这个方法都是在做plugin.apply的调用注册，并将compiler对象传入进去，这些Plugin后续会通过tapable来实现钩子的监听, 并进行自己的处理逻辑

Compiler中run方法执行原理

webpack/lib/Compiler.js

在上述createCompiler中我们new了一个Compiler对象，这个构造方法主要做了什么呢，我们可以看下webpack/lib/Compiler.js这个文件

当new Compiler这个构造函数是会初始化各种各样的hooks，而之前说process里面的plugin里会注册这些hooks，这些hooks来自一个叫tapable的库来管理的，这是由webpack 官方自己来维护的一个库，对于tapable这个库的介绍使用可以看我另一篇webpack文章webpack5之Loader和Plugin的实现。

现在我们来看看Compiler内的run方法，其实主要是执行之前plugin注册的hooks。

而在Compiler里面的run方法里，又定义了一个run方法，那我们看下这里做了什么

1. 执行run

首先执行了hooks.beforeRun，执行一些需要运行前操作的plugin
再执行了hooks.run，执行一些需要运行开始需要操作的plugin
执行compile方法，并传入了onCompiled编译完成的回调

2. 执行compile

当执行到this.compile就是开始准备编译了，我们来看看compile里面做了什么

执行hooks.beforeCompile
执行hooks.compile
执行hooks.make
执行hooks.finishMake
执行hooks.afterCompile

其实hooks.make是最终的编译过程，而在hooks.compile和hooks.make之间执行了const compilation = this.newCompilation(params);，并将compilation传入了hooks.make。

这里的Compilation与Compiler有什么区别呢

Compiler

在webpack构建的之初就会创建的一个对象, 并且在webpack的整个生命周期都会存在(before - run - beforeCompiler - compile - make - finishMake - afterCompiler - done)
只要是做webpack的编译, 都会先创建一个Compiler
如果修改webpack配置需要重新npm run build

Compilation