Core source code analysis of webpack5

webpack series directory

1. The core configuration of webpack5
2. The modular principle of webpack5
3. Babel/ESlint/browser compatibility of webpack5
4. Performance optimization of webpack5
5. Implementation of Loader and Plugin of webpack5
6. Core source code analysis of webpack5

The principle of starting the webpack command

We start webpack usually by configuring webpack commands in npm scripts, such as build packaging commands

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

1. webpack/bin/webpack.js

We use the webpack command to start with the help of webpack-clitools. When we install webpack, there is a line of binattributes in webpack's package.json, then npm will use binthe attribute name inside webpackas the file name, and the new content in this file in the bindirectory as the content. webpack.jsfile, copy and node_modules/.bininstall below

So when we execute the webpack command, we actually execute webpack/bin/webpack.jsthis file.

Let's take a look at webpack/bin/webpack.jsthis file, the main process is as follows

1. First define an cliobject
2. When judging whether clithe inner installedattribute is true
3. implementrunCli

That is to say, it will first determine whether webpack-clithe package is installed. If it is not, it will enter the conditional installation, otherwise it will be executed runCli. In general, we also use the command package to install webpackand install webpack-clithe two packages at the same time, so the main thing is to seerunCli

1. Execute runCli

The main thing in runcli is to splicing the attribute values ​​in the cli into a path, pkgPaththat is webpack-cli/package.json, pkgthe webpack-cli/package.jsonobject, and webpack-cli/package.jsonthe bincorresponding webpack-cliattribute value of the attribute in the cli isbin/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主要做了

1. new了一个Compiler对象
2. plugin.apply注册了所有的插件
3. 调用了environment和afterEnvironment环境hook
4. 调用new WebpackOptionsApply().process将配置属性转为plugin注册
5. 返回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

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

2. 执行compile

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

1. 执行hooks.beforeCompile
2. 执行hooks.compile
3. 执行hooks.make
4. 执行hooks.finishMake
5. 执行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

• 存在于compile - make阶段
• watch源代码，每次发生改变就需要重新编译模块，创建一个新的Compilation对象

Compilation对Module的处理

上述的hooks.make只是一个hook的调用，我们要去找注册在这个钩子上的回调，我们可以前往process内的new EntryOptionPlugin().apply(compiler) 这个entry插件

1. webpack/lib/EntryPlugin.js

这个插件在apply里调用applyEntryOption，而里面又调用EntryPlugin插件

EntryPlugin插件内可以看到注册了hooks.make

而在注册回调中主要执行了compilation.addEntry，那我们来看看在compilation这个对象中主要做了什么

2. webpack/lib/Compilation.js

在执行compilation.addEntry这里主要做了

1. 执行_addEntryItem，用于添加入口的Item
2. 执行addModuleTree
3. 在addModuleTree中执行handleModuleCreation
4. 在handleModuleCreation中执行factorizeModule，添加hooks到factorizeQueue队列中
5. 在handleModuleCreation中执行addModule，添加module模块到addModuleQueue队列中
6. 在addModule中执行buildModule，将需要构建的module模块添加到buildQueue队列中
7. buildQueue队列中有一个processor属性，执行_buildModule
8. _buildModule中执行module.needBuild判断模块是否需要构建
9. 执行module.build，
10. 最后会在wepack/lib/NormalModule.js中执行build方法，开始构建模块

module的build阶段

上面在处理module的最后在wepack/lib/NormalModule.js中执行build方法，开始构建模块，那现在我们来看看build做了哪些内容

wepack/lib/NormalModule.js

1. 执行doBuild

2. 执行_doBuild

执行doBuild内的_doBuild方法

3. 执行runLoaders

执行_doBuild内runLoaders，这个runLoaders来自独立的loader-runner库，我们之前配置的各种Loaders就是在这里处理的

4. 执行processResult

runLoaders执行结束后回执行processResult这个回调

5. 执行parse

之后会调用parse解析AST树

而这个parse来自webpack/lib/javascript/JavascriptParser.js内的parse

这个parse其实是用到了acorn这个库来解析javascript

6. 执行handleBuildDone

解析完后会调用handleParseResult回调，里面执行handleBuildDone

handleBuildDone里又执行了build里面传进来的回调

最终执行的webpack/lib/Compilation.js下的module.build传进来的回调

7. _buildModule执行完成

当_buildModule执行完成后，最终hooks.make执行完成，于是接下来会执行webpack/lib/Compiler.js的compilation.finish和compilation.seal方法

到seal这一步，就是开始将静态资源输出到构建目录了

输出静态资源到构建目录

1. 执行hooks.optimizeChunkModules

Execute first hooks.optimizeChunkModules, optimize the module code before

2. Execute codeGeneration

execute codeGeneration, generate code

3. Execute createChunkAssets

execute createChunkAssets, create chunkAssetsresource

4. Execute getRenderManifest

In the execution createChunkAssets, getRenderManifestput all the data into a manifest object

5. Execute emitAsset

Execute emitAsset, output resources, at this time resources have been stored in memory

6. Execute onCompiled

webpack/lib/CompilerExecute callback after final compilecompletiononCompiled

7. Execute emitAssets

onCompiledExecute in the callback emitAssets,

8. Execute hooks.emit

emitAssetsFinally execute hooks.emitthe export of the resource to the build directory inside

end

The introduction of the source code may still be incomplete. When viewing the source code, we can use the debugger tool of vscode to view the code direction through breakpoints. The above introduction should be able to roughly clarify the process of webpack execution, but more For the details, I still hope that you can explore more with the debugger.