webpack 原理

webpack 核心

核心概述

• entry 入口文件：js 代码文件，可执行的 node 模块或打包的入口文件。
• chunk 代码块：代码分割的代码块，按需加载的分块，装载多个不同模块和这些模块所依赖的模块文件经过 webpack 打包而成的代码块。
• loader 文件转换器：把匹配规则的文件资源转换成想要的结果，比如 scss-loader 把 scss 文件当作模块转成 css 文件，loader 可以串行使用。
• plugin 插件：用于扩展webpack的功能，在 webpack 构建过程中各个 hook 上扩展功能，调用 webpack API 改变输出结果。

module, chunk, bundle 之间的关系

• module 模块：代码模块，由 import, require 等模块规范导出的代码片段。
• chunk 代码块：由多个 module 组成，通常情况下 bundle 是由 chunk 对应生成。
• bundle：由多个 module 组成，通常跟 chunk 对应，包含已经过加载和编译的最终生成的源文件。

一个例子介绍 module, chunk, bundle

{
  entry: {
    foo: ["lodash.js","./src/foo.js"],
    bar: ["./src/bar.js"]
  },
  output: {
    path: "./dist",
    filename: "[name].js"
  }
}

• module: lodash.js ，./src/foo.js, 还包括 foo.js 用 require, import 等方法导入的文件和依赖+ chunk: foo, bar
• bundles: foo.js, bar.js 文件

webpack 核心对象

• Tapable
  与 nodejs 中的 eventEmiiter 模块类似, Compiler 和 Compilation 对象都继承于 Tapable，webpack 运行时通过 Tabpable 实例的 API 进行广播和监听

// 旧版本: 使用的 apply 和 plugin 广播和监听事件
// 广播事件
compiler.apply('eventName',params);
// 监听事件
compiler.plugin('eventName',function(params) {});

// 新版本: 使用 Hooks 进行广播和监听
const { SyncHook } = require("tapable")
let hook = new SyncHook(['自定义钩子名']); 
// 订阅
hook.tap('自定义函数名', function (params) {  // todo  });
// 发布
hook.call(params);// 发布的时候触发订阅的函数 同时传入参数

参考 Tapable 的使用

• Compiler
  Compiler 继承 Tapable 对象，可以广播和监听 webpack 事件。
  Compiler 对象是 webpack 的编译器，webpack 周期中只存在一个 Compiler 对象。
  Compiler 对象在 webpack 启动时创建实例，�compiler 实例中包含 webpack 的完整配置，包括 loaders, plugins 信息。

• Compilation
  Compilation 继承 Tapable 对象，可以广播和监听 webpack 事件。
  Compilation 实例仅代表一次 webpack 构建和生成编译资源的的过程。
  webpack 开发模式开启 watch 选项，每次检测到入口文件模块变化时，会创建一次新的编译: 生成一次新的编译资源和新的 compilation 对象，这个 compilation 对象包含了当前编译的模块资源 module, 编译生成的资源，变化的文件, 依赖的的状态

Compiler 和 Compilation 的区别在于：Compiler 代表了整个 Webpack 从启动到关闭的生命周期，而 Compilation 只是代表了一次新的编译。

webpack 构建

webpack 编译的过程有哪些阶段
webpack 是如何从 entry 开始解析整个依赖树的
laoders 在何时调用的

流程图

webpack 流程

流程顺序

解析webpack配置参数，合并的命令行启动传入和 webpack.config.js 文件里配置。

• 注册插件
  注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。
  从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。
  在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。
  递归完后得到每个文件的最终结果，根据entry配置生成代码块chunk。
  输出所有chunk到文件系统。

注册插件

const webpack = (options, callback) => {
        // ...
    compiler = new Compiler(options.context);
        compiler.options = options;
        new NodeEnvironmentPlugin().apply(compiler);
        if (options.plugins && Array.isArray(options.plugins)) {
            // 加载 webpack.config.js 里的插件
            for (const plugin of options.plugins) {
                if (typeof plugin === "function") {
                    plugin.call(compiler, compiler);
                } else {
                    plugin.apply(compiler);
                }
            }
         // ...
        // 加载 webpack 自身的插件
        compiler.options = new WebpackOptionsApply().process(options, compiler);
        // ... 有watch 配置执行 compiler.watch(watchOptions, callback)
        compiler.run(callback);
    }
    return compiler;
    // ...

WebpackOptionsApply

• WebpackOptionsApply 会根据配置注册对应的 webpack 内部插件
• WebpackOptionsApply 一开始会注册一个处理 Entry 的插件
  仅仅是注册了 EntryOptionPlugin 插件, 这个插件会在 make 阶段调用 compilation 的 addEntry 把入口文件通过 parse 先解析成 AST 语法树，对 AST 进行遍历收集 require、import 这些导入的模块 module。

class WebpackOptionsApply {
  process(options, compiler) {
    // ...
    // 处理一个 Entry 插件
    new EntryOptionPlugin().apply(compiler);
    // 调用 entryOption 钩子 注册 EntryOptionPlugin 插件，注册 DynamicEntryPlugin  等待 make 钩子触发执行 compilation 对象上的 addEntry
    compiler.hooks.entryOption.call(options.context, options.entry);

    // ... 加载 webpack 自身的插件
  }
}

注册的钩子 Hooks

// EntryOptionPlugin.js
module.exports = class EntryOptionPlugin {
  apply(compiler) {
    compiler.hooks.entryOption.tap("EntryOptionPlugin", (context, entry) => {
        // ...
        new DynamicEntryPlugin(context, entry).apply(compiler);
        return
    }
  }
}

// DynamicEntryPlugin.js 
class DynamicEntryPlugin {
  apply(compiler) {
    // 等待触发 make 钩子进行 addEntry
    compiler.hooks.make.tapAsync('DynamicEntryPlugin', (compilation, callback) => {
      const addEntry = (entry, name) => {
        //...
        compilation.addEntry(...)
      }
    }
    // ...
    return addEntry(entry[name], name);
  }
}

compiler.run

compiler.run 才是 webpack 的编译的入口，run 会启动编译执行构建流程，在不同的生命周期执行相应的插件

• compile 开始编译
• make 从入口点分析模块及其依赖的模块，创建这些模块对象
• build-module 构建模块
• after-compile 完成构建
• seal 封装构建结果
• emit 把各个chunk输出到结果文件
• after-emit 完成输出

// Compiler.js
class Compiler extends Tapable {

  run() {
  // ...
    this.hooks.beforeRun.callAsync(this,  // beforeRun
      this.hooks.run.callAsync(this, err => { // run
    this.readRecords(err => {
      this.compile(onCompiled); // 执行 this.compile
    });
      });
    });
  }

compile(callback) {
  const params = this.newCompilationParams();
    this.hooks.beforeCompile.callAsync(params, err => { // 执行 beforeCompile hook
      if (err) return callback(err);

      this.hooks.compile.call(params); // 执行 compile hook

      const compilation = this.newCompilation(params); // 创建 compilation 编译资源实例

      this.hooks.make.callAsync(compilation, err => { // 执行 mak hook
    if (err) return callback(err);

    compilation.finish();

    compilation.seal(err => { // seal hook
      if (err) return callback(err);

      this.hooks.afterCompile.callAsync(compilation, err => { // afterCompile hook
        if (err) return callback(err);
        return callback(null, compilation);
      });
    });
      });
    });
  }  
}

• 构建 Compilation 对象
  compiler.run 时会在 compiler 中 创建一个 Compilation 实例对象，compilation 对象中存放着 module, chunk, assets 还有生成文件的 template 信息。同时 compilation 代表 webpack 构建生成d编译资源的过程，还具有 addEntry() , _addModuleChain() , buildModule() , seal() , createChunkAssets()等方法用于编译过程的各个阶段触发各种 hooks 来调用相应插件。

• 先从 make 钩子开始看，是由 compiler 触发的，之前在 WebpackOptionsApply 里处理 hooks.EntyOption 到 DynamicEntryPlugin 中订阅了的 compiler.hooks.mak.tapasync() 这个 make hook。

// DynamicEntryPlugin.js
        compiler.hooks.make.tapAsync(
            "DynamicEntryPlugin",
            (compilation, callback) => {
            const addEntry = (entry, name) => {
                    const dep = DynamicEntryPlugin.createDependency(entry, name);
                    return new Promise((resolve, reject) => {
                        compilation.addEntry(this.context, dep, name, err => {
                            if (err) return reject(err);
                            resolve();
                        });
                    });
                };

                Promise.resolve(this.entry()).then(entry => {
                    if (typeof entry === "string" || Array.isArray(entry)) {
                        addEntry(entry, "main").then(() => callback(), callback);
                    } else if (typeof entry === "object") {
                        Promise.all(
                            Object.keys(entry).map(name => {
                                return addEntry(entry[name], name);
                            })
                        ).then(() => callback(), callback);
                    }
                });
            }
        );

• 在 mak hook 中调用了 compilation.addEntry 方法，读取 options 中的 entry 对象找到入口文件，addEntry 中还会调用私有方法 _addModuleChain

addEntry(context, entry, name, callback) {
  this._addModuleChain(context, entry, module => this.entries.push(module), callback)
}

在创建 module 之前，Compiler 会触发 make，并调用 Compilation.addEntry 方法，通过 options 对象的 entry 字段找到我们的入口js文件。之后，在 addEntry 中调用私有方法 _addModuleChain ，这个方法主要做了两件事情。一是根据模块的类型获取对应的模块工厂并创建模块，二是构建模块。
在 module 创建之前， Compiler 实例会触发 make 钩子

// Compiler.js
class Compiler extends Tapable {
  compile() {
    // ...
     this.hook.make.callAsync(compilation, err => {})
    // ..
  }
}

调用 compilation 实例中的 addEntry

之后再 addEntry 中调用私有方法 _addModuleChain

在 _addModuleChain 中根据模块的类型获取对应模块的工厂函数创建模块，构建模块

_addModuleChain(context, dependency, onModule, callback) {
  //.. 
  // dependency 就是传入的 entry 
  const Dep = /** @type {DepConstructor} */ (dependency.constructor);
  // 找到 相应的工厂函数
  const moduleFactory = this.dependencyFactories.get(Dep);

  // ...
  moduleFactory.create( // 创建 module
    {
      contextInfo: {
        issuer: "",
    compiler: this.compiler.name
      },
      context: context,
      dependencies: [dependency]
    },
    (err, module) => {
      // ...
      // 构建模块, buildModule 调用到 NormalModule 的 build 
      this.buildModule(module, false, null, null, err => { // ... })
    }
}

compilation 构建模块, buildModule 调用到 NormalModule 的 build, 执行 doBuild 对每个 require、import 的文件用对应的 loader 进行处理，最后生成 js 的 module。

// NormalModule.js
build(options, compilation, resolver, fs, callback) {
   // ...
  // 返回 doBuild
  return this.doBuild(options, compilation, resolver, fs, err => {    

    const result = this.parser.parse(
      this._ast || this._source.source(), // doBuild  函数里会给环境上下文赋值后执行回调
    {
      current: this,
      module: this,
          compilation: compilation,
      options: options
    },
        (err, result) => { handleParseResult(result) }
    );
  })
}

doBuild(options, compilation, resolver, fs, callback) {
  const loaderContext = this.createLoaderContext(resolver, options, compilation, fs)
  // 进行 loader 处理
  runLoaders({ resource: this.resource, loaders: this.loaders, context: loaderContext, readResource: fs.readFile.bind(fs) 
    (err, result) => {
      // ...
      this._source = this.createSource(..) // 给环境上下文赋值
      this._ast = extraInfo.webapckAST // 给环境上下文赋值
      return callback() // 执行 doBuild  回调，进行 parser.parse
    }
  },  
}

调用 acorn 包把 loader 处理后文件解析成抽象语法树 AST

class Parser extends Tapable {
  parse() {  
    // ...
    ast = acorn.parse(code, {
      ranges: true,
      locations: true,
      ecmaVersion: 2019,
      sourceType: "module",
      onComment: null,
      plugins: {
        dynamicImport: true
      }
  }
}

遍历 AST 构建其中模块依赖的模块，模块可能存在依赖其他模块的情况，遍历 AST 将 require、import 的模块通过 addDependency() 添加到此模块的依赖 dependenies 数组中。当前模块构建完成后，webpack 调用 processModuleDependencies 开始递归处理依赖的 module，接着就会重复之前的构建步骤。

• processModuleDependencies 方法递归执行 addDependency 进行依赖解析并收集到 module.dependenies 中
  

• 把模块所依赖的模块收集到 module.dependenies 后，回到 compiler.js 中的 compile 方法里调用 compilation.seal
  

• 在所有模块和依赖模块构建完后， seal hook 调用各插件对构建后的结果进行处理，对每个 module 和 chunk 进行整理，生成编译后的源码

seal() {
  //... 一大堆 hook 触发插件
  this.createModuleAssets()
  this.createChunkAssets() // 最终生成资源文件
  // 把 js 模块都收集到一起，entry 对应每个 chunk 比如 app.js ，使用代码分割会产生多个不同的 chunk
}

• createChunkAssets 这个方法遍历 this.chunks 生成对应 entry 的数量和命名的文件内容，同时 dependencies 记录依赖的 modules。最后把 chunk 携带的依赖树一起调用 MainTemplate 中的 render 插件生成最终的代码文件。

• 把 render 方法存放在 mainfest 里
  

• 遍历 mainfest 最后执行 render 生成 source
  

• 最后根据 生成 budle 文件的 模板遍历 chunk 的依赖树把 module 传入生成最终的 js 文件.

总结

• webpack 实际是一个 插件的集合。
• webpack 由 tapable 控制在各个插件在 hook 的事件流上运行
• webpack 主要编译流程依赖于 compilation 和 module 两个对象

流程总结

• webpack 根据配置注册对应的插件
• 生成 compile 实例，执行 compile.run 进入编译阶段
• 第一步创建 compilation 实例，compilation 实例注册处理不同类型 module 对应的工厂 factory 插件，用于处理不同的 module
• make 阶段，根据 entry 配置处理对应的 chunk 资源：
  1 调用 loaders 对模块资源进行处理(doBuild)�，转换成统一标准的 js 代码(babel-loader)的 module
  2 在 parser.parse 中调用 acorn 对 AST 的 js 代码进行语法分析，收集 module 间的依赖关系，记录下来形成依赖树
• 最后在钩子 compilation.seal 进入 render 阶段，根据 module 的依赖，生成 module.source() 传入 MainTemplate 中进行 render 生成最终文件