webpack 基本流程

Webpack 的运⾏⽅式

// 第一种：基于命令行的方式
webpack --config webpack.config.js

// 第二种：基于代码的方式
var webpack = require('webpack')
var config = require('./webpack.config')
webpack(config, (err, stats) => {})

webpack.js 中的基本流程

Webpack 函数的核⼼逻辑是：根据配置⽣成编译器实例 compiler，然后处理参数，执⾏ WebpackOptionsApply().process，根据参数加载不同内部插件。在有回调函数的情况下，根据是否是 watch 模式来决定要执⾏ compiler.watch 还是 compiler.run。

Compiler.js 中的基本流程

1. readRecords：读取构建记录，⽤于分包缓存优化，在未设置 recordsPath 时直接返回。
2. compile 的主要构建过程，涉及以下⼏个环节：
   a. newCompilationParams：创建 NormalModule 和 ContextModule 的⼯⼚实例，⽤于创建后续模块实例。
   b. newCompilation：创建编译过程 Compilation 实例，传⼊上⼀步的两个⼯⼚实例作为参数。
   c. compiler.hooks.make.callAsync：触发 make 的 Hook，执⾏所有监听 make 的插件（例如 SingleEntryPlugin.js 中，会在相应的监听中触发 compilation 的 addEntry ⽅法）。其中，Hook 的作⽤，以及其他 Hook 会在下⾯的⼩节中再谈到。
   d. compilation.finish：编译过程实例的 finish ⽅法，触发相应的 Hook 并报告构建模块的错误和警告。
   e. compilation.seal
3. emitAssets：调⽤ compilation.getAssets()，将产物内容写⼊输出⽂件中。
4. emitRecords：对应第⼀步的 readRecords，⽤于写⼊构建记录，在未设置 recordsPath 时直接返回。

Compilation.js 中的基本流程

1. addEntry：从 entry 开始递归添加和构建模块。
2. seal：冻结模块，进⾏⼀系列优化，以及触发各优化阶段的 Hooks。

执⾏ Webpack 构建时的基本流程

1. 创建编译器 Compiler 实例。
2. 根据 Webpack 参数加载参数中的插件，以及程序内置插件。
3. 执⾏编译流程：创建编译过程 Compilation 实例，从⼊⼝递归添加与构建模块，模块构建完成后冻结模块，并进⾏优化。
4. 构建与优化过程结束后提交产物，将产物内容写到输出⽂件中。

Webpack 中的插件

Webpack 引擎基于插件系统搭建⽽成，不同的插件各司其职，在 Webpack ⼯作流程的某⼀个或多个时间点上，对构建流程的某个⽅⾯进⾏处理。
⼀个 Webpack 插件是⼀个包含 apply ⽅法的 JavaScript 对象。这个 apply ⽅法的执⾏逻辑，通常是注册 Webpack ⼯作流程中某⼀⽣命周期 Hook，并添加对应 Hook 中该插件的实际处理函数。

Hook（俗称钩⼦）的使⽤⽅式

1. 在构造函数中定义 Hook 类型和参数，⽣成 Hook 对象。
2. 在插件中注册 Hook，添加对应 Hook 触发时的执⾏函数。
3. ⽣成插件实例，运⾏ apply ⽅法。
4. 在运⾏到对应⽣命周期节点时调⽤ Hook，执⾏注册过的插件的回调函数。

Compiler Hooks（构建器实例的⽣命周期）

1. 初始化阶段
2. 构建过程阶段
3. 产物⽣成阶段

Compilation Hooks（构建过程实例的⽣命周期）

1. 构建阶段

2. 优化阶段

   
   

编写⼀个统计构建过程⽣命周期耗时的插件

class SamplePlugin {
    apply(compiler) {
        var start = Date.now()
        var statsHooks = ['environment', 'entryOption', 'afterPlugins', 'compile']
        var statsAsyncHooks = ['beforeRun', 'beforeCompile', 'make', 'afterCompile', 'emit', 'done']
        statsHooks.forEach((hookName) => {
            compiler.hooks[hookName].tap('Sample Plugin', () => {
                console.log(`Compiler Hook ${hookName}, Time: ${Date.now() - start}ms`)
            })
        })
        // ···
    }
})
module.exports = SamplePlugin;