# Webpack本质

Webpack本质上一种基于事件流的编程范例，其实就是一系列的插件运行

Webpack主要使用Compiler和Compilation两个类来控制Webpack的整个生命周期。他们都继承了Tapabel并且通过Tapabel来注册了生命周期中的每一个流程需要触发的事件

# Tapabel

Tapabel是一个类似于 Node.js 的 EventEmitter 的库，主要是控制钩子函数的发布与订阅，是Webpack插件系统的大管家

Tapabel提供的钩子及示例

Tapable库为插件提供了很多 Hook以便挂载。

const {
    SyncHook,                   // 同步钩子
    SyncBailHook,               // 同步熔断钩子
    SyncWaterfallHook,          // 同步流水钩子
    SyncLoopHook,               // 同步循环钩子
    AsyncParalleHook,           // 异步并发钩子
    AsyncParallelBailHook,      // 异步并发熔断钩子
    AsyncSeriesHook,            // 异步串行钩子
    AsyncSeriesBailHook,        // 异步串行熔断钩子
    AsyncSeriesWaterfallHook     // 异步串行流水钩子
} = require("tapable");

@前端进阶之旅: 代码已经复制到剪贴板

Tabpack 提供了同步&异步绑定钩子的方法，方法如下所示：

Async	Sync
绑定：`tapAsync/tapPromise/tap`	绑定：`tap`
执行：`callAsync/promise`	执行：`call

Tabpack简单示例

const demohook = new SyncHook(["arg1", "arg2", "arg3"]);
// 绑定事件到webpack事件流
demohook.tap("hook1",(arg1, arg2, arg3) => console.log(arg1, arg2, arg3)) // 1 2 3
// 执行绑定的事件
demohook.call(1,2,3)

@前端进阶之旅: 代码已经复制到剪贴板

# 源码解读

1. 初始化启动之Webpack的入口文件

追本溯源，第一步我们要找到Webpack的入口文件。
当通过命令行启动Webpack后，npm会让命令行工具进入node_modules.bin 目录。
然后查找是否存在 webpack.sh 或者 webpack.cmd 文件，如果存在，就执行它们，不存在就会抛出错误。
实际的入口文件是：node_modules/webpack/bin/webpack.js，让我们来看一下里面的核心函数。

// node_modules/webpack/bin/webpack.js
// 正常执行返回
process.exitCode = 0;    
// 运行某个命令                               
const runCommand = (command, args) => {...}
// 判断某个包是否安装
const isInstalled = packageName => {...}
// webpack可用的CLI：webpacl-cli和webpack-command
const CLIs = {...}
// 判断是否两个CLI是否安装了
const installedClis = CLIs.filter(cli=>cli.installed);
// 根据安装数量进行处理
if (installedClis.length === 0) {...} else if 
 (installedClis.length === 1) {...} else {...}

@前端进阶之旅: 代码已经复制到剪贴板

启动后，Webpack最终会找到 webpack-cli /webpack-command的 npm 包，并且执行 CLI。

2. webpack-cli

搞清楚了Webpack启动的入口文件后，接下来让我们把目光转移到webpack-cli，看看它做了哪些事儿。

引入 yargs，对命令行进行定制分析命令行参数，对各个参数进行转换，组成编译配置项引用webpack，根据配置项进行编译和构建
webpack-cli 会处理不需要经过编译的命令。

// node_modules/webpack-cli/bin/cli.js
const {NON_COMPILATION_ARGS} = require("./utils/constants");
const NON_COMPILATION_CMD = process.argv.find(arg => {
    if (arg === "serve") {
        global.process.argv = global.process.argv.filter(a => a !== "serve");
        process.argv = global.process.argv;
    }
    return NON_COMPILATION_ARGS.find(a => a === arg);
});
if (NON_COMPILATION_CMD) {
    return require("./utils/prompt-command")(NON_COMPILATION_CMD,...process.argv);
}

@前端进阶之旅: 代码已经复制到剪贴板

webpack-cli提供的不需要编译的命令如下

// node_modules/webpack-cli/bin/untils/constants.js
const NON_COMPILATION_ARGS = [
    "init",                 // 创建一份webpack配置文件
    "migrate",              // 进行webpack版本迁移
    "add",                  // 往webpack配置文件中增加属性
    "remove",               // 往webpack配置文件中删除属性
    "serve",                // 运行webpack-serve
    "generate-loader",      // 生成webpack loader代码
    "generate-plugin",      // 生成webpack plugin代码
    "info"                  // 返回与本地环境相关的一些信息
];

@前端进阶之旅: 代码已经复制到剪贴板

webpack-cli 使用命令行工具包yargs

// node_modules/webpack-cli/bin/config/config-yargs.js
const {
    CONFIG_GROUP,
    BASIC_GROUP,
    MODULE_GROUP,
    OUTPUT_GROUP,
    ADVANCED_GROUP,
    RESOLVE_GROUP,
    OPTIMIZE_GROUP,
    DISPLAY_GROUP
} = GROUPS;

@前端进阶之旅: 代码已经复制到剪贴板

webpack-cli对配置文件和命令行参数进行转换最终生成配置选项参数 options，最终会根据配置参数实例化webpack对象，然后执行构建流程。
除此之外，让我们回到node_modules/webpack/lib/webpack.js里来看一下Webpack还做了哪些准备工作。

// node_modules/webpack/lib/webpack.js
const webpack = (options, callback) => {
    ...
    options = new WebpackOptionsDefaulter().process(options);
    compiler = new Compiler(options.context);
    new NodeEnvironmentPlugin().apply(compiler);
    ...
    compiler.options = new WebpackOptionsApply().process(options, compiler);
    ...
    webpack.WebpackOptionsDefaulter = WebpackOptionsDefaulter;
    webpack.WebpackOptionsApply = WebpackOptionsApply;
    ...
    webpack.NodeEnvironmentPlugin = NodeEnvironmentPlugin;
}

@前端进阶之旅: 代码已经复制到剪贴板

WebpackOptionsDefaulter的功能是设置一些默认的Options(代码比较多不贴了，大家自行查看node_modules/webpack/lib/WebpackOptionsDefaulter.js)

// node_modules/webpack/lib/node/NodeEnvironmentPlugin.js
class NodeEnvironmentPlugin {
  apply(compiler) {
      ...		
      compiler.hooks.beforeRun.tap("NodeEnvironmentPlugin", compiler => {
	  if (compiler.inputFileSystem === inputFileSystem) inputFileSystem.purge();
      });
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

从上面的代码我们可以知道，NodeEnvironmentPlugin插件监听了beforeRun钩子，它的作用是清除缓存

3. WebpackOptionsApply

WebpackOptionsApply会将所有的配置options参数转换成webpack内部插件。

使用默认插件列表

output.library -> LibraryTemplatePlugin
externals -> ExternalsPlugin
devtool -> EvalDevtoolModulePlugin, SourceMapDevToolPlugin
AMDPlugin, CommonJsPlugin
RemoveEmptyChunksPlugin

// node_modules/webpack/lib/WebpackOptionsApply.js
new EntryOptionPlugin().apply(compiler);
compiler.hooks.entryOption.call(options.context, options.entry);

@前端进阶之旅: 代码已经复制到剪贴板

实际上，插件最后都会变成compiler对象上的实例。

4. EntryOptionPlugin

下来让我们进入EntryOptionPlugin插件，看看它做了哪些事儿。

如果是数组，则转换成多个entry来处理，如果是对象则转换成一个个entry来处理。
compiler实例化是在node_modules/webpack/lib/webpack.js里完成的。通过EntryOptionPlugin插件进行参数校验。通过WebpackOptionsDefaulter将传入的参数和默认参数进行合并成为新的options，创建compiler，以及相关plugin，最后通过
WebpackOptionsApply将所有的配置options参数转换成Webpack内部插件。
再次来到我们的node_modules/webpack/lib/webpack.js中

实例compiler后会根据options的watch判断是否启动了watch，如果启动watch了就调用compiler.watch来监控构建文件，否则启动compiler.run来构建文件。

# 编译构建

compile

首先会实例化NormalModuleFactory和ContextModuleFactory。然后进入到run方法。

# make

如果模块构建完成，会触发finishModules。

1. Module

2. loader-runner

# Webpack本质

# Tapabel

# 源码解读

# 编译构建

# make

# 总结

从源码窥探Webpack4.x原理|原理篇

从源码窥探Webpack4.x原理|原理篇