Webpack编译流程详解

1. webpack 运行流程图

跟着流程图走, 弄懂编译流程不用愁~

2. 研究 webpack 源码的好处

• 理解 webpack 的运行流程
• 理解 webpack 插件
• 学习 webpack 中的技巧和思想

3. webpack 插件

一个简单的插件

    class TestPlugin {
      apply(compiler) {
        console.log("compiler", compiler);
        compiler.hooks.compilation.tap("TestPlugin", function() {
          console.log("compilation", compilation);
        });
      }
    }
    module.exports = TestPlugin;

• 写插件的关键: 了解 compile, compilation 具体是做什么的, 了解这两个函数的参数,方法, 运行机制,才能写好插件

4. webpack 入口

• webpack 从入口开始, 输入的是什么, 输出的又是什么呢?

  • 输入: 配置文件+ 源代码
  • 输出: 打包后的文件

• webpack 的入口是一个 webpack 的函数, 下面我们来看看这个函数具体做了什么, 主要流程如下:

    webpack = options => {
      // 1. 整合options
      // options就是配置, 包括自己的配置加webpack的默认配置, 指导webpack后续的运行
      // 2. 实例化compile
      const compile = new Compile(options.context);
      // 3. 实例化所有的插件, 调用他们的apply方法

      // 4. 返回compile 示例
      return compile;
    };

• 以下模拟 webpack-cli 中的代码, 相当于在命令行输入 webpack

    // webpack函数核心是生成compile函数, 在外部执行它
    const options = require("./webpack.config.js"); // 所有配置文件
    const compile = webpack(options); // 执行webpack函数
    compile.run(); // 执行

• webpack 函数第三步的代码示例

    // 插件是否被实例化,是可以进行控制的, 见以下代码
    // WebpackOptionsApply.js
    // options.optimization.removeAvailableModules为true, 才会实例化插件
    if (options.optimization.removeAvailableModules) {
      const RemoveParentModulesPlugin = require("./optimize/RemoveParentModulesPlugin");
      new RemoveParentModulesPlugin().apply(compiler);
    }

    // 对于某些插件, 是必须要进行实例化的
    // 如NodeEnvironmentPlugin, 在实例化compile后, 会立即执行new NodeEnvironmentPlugin(compile).run()
    // 以下为本插件的代码:

    class NodeEnvironmentPlugin {
      apply(compile) {
        compiler.inputFileSystem = new CachedInputFileSystem(
          new NodeJsInputFileSystem(),
          60000
        );
        const inputFileSystem = compiler.inputFileSystem;
        compiler.outputFileSystem = new NodeOutputFileSystem();
        compiler.watchFileSystem = new NodeWatchFileSystem(
          compiler.inputFileSystem
        );
        compiler.hooks.beforeRun.tap("NodeEnvironmentPlugin", compiler => {
          if (compiler.inputFileSystem === inputFileSystem)
            inputFileSystem.purge();
        });
      }
    }
    // 本插件赋予了compile对象文件存储的能力, 这是必须插件

对于webpack插件分为两种, 一种是必须的, 一种是优化插件

5. compile

从 webpack 函数中, 我们知道了实例化 compile 对象后, 会执行 compile.run 方法, 以下我们来看看 compile 函数

   // 先看compile中的run方式
    // compile.js
    class compile extends Tapable {
      constructor(context) {
        // 注册钩子
        this.hooks = {
          ...beforeRun,
          run
        };
      }
      run() {
        this.hooks.beforeRun.callAsync(this, err => {
          this.hooks.run.callAsync(this, err => {
            this.compile(onCompiled); // 传入onCompiled回调
          });
        });
      }
    }

执行步骤  beforeRun(此钩子在上例NodeEnvironmentPlugin注册) => run => 调用compile函数, 传入onCompiled回调

    // 以下为compolie函数示例

    class compile extends Tapable {
      createCompilation() {
        return new Compilation(this); // 实例化Compilation
      }
      newCompilation(params) {
        const compilation = this.createCompilation();
        this.hooks.thisCompilation.call(compilation, params); // thisCompilation钩子
        this.hooks.compilation.call(compilation, params); // thisCompilation钩子
        return compilation;
      }

      compile(callback) {
        this.hooks.beforeCompile.callAsync(params, err => {
          this.hooks.compile.call(params);
          const compilation = new newCompilation(params);
          this.hooks.make.callAsync(compilation, err => {
            compilation.finish(err => {
              compilation.seal(err => {
                this.hooks.afterCompile.callAsync(compilation, err => {
                  return callback(null, compilation);
                });
              });
            });
          });
        });
      }
    }

执行步骤: beforeCompile钩子 => compile钩子 => 实例化compilation(1. 调用thisCompilation => 2. compilation) => make钩子(执行完成后, 模块转化完成)
=> finish => seal封装 => afterCompile钩子(编译结束)

    const onCompiled = (err, compilation) => {
      if (this.hooks.shouldEmit.call(compilation) === false) {
        this.hooks.done.callAsync(status, err => {});
        return;
      }
      this.emitAssets(compilation, err => {
        this.hooks.done.callAsync(status, err => {});
        return;
      });
    };

// 步骤: shouldEmit钩子 ? 成功调用emitAssets => done钩子, 完成一次输出 : 编译不成功调用done钩子

• compile 总结
  • compile 的调用栈如下: run => compile => onCompiled
  • run 函数中触发的钩子：beforeRun，run
  • compile 函数中触发的钩子：beforeCompile，compile，thisCompilation，compilation，make，afterCompile
  • onCompiled 函数中触发的钩子: should-emit，emit，done

6. compilation

• 对象职责: 构建模块和 chunk, 并利用插件优化构建过程
• 首先来理解 compilation 对象, moduleFactory, module 三者之间的关系吧

compilation 编译模块的入口

要从 compiler 的 make 钩子看起，从上面的 compile 的方法内看到，实例化 compilation 对象后，并没有对它做什么操作，而是直接调用了 make 钩子，在钩子挂载的入口相关的插件中，操作了 compilation，我们来看一下：

    class SingleEntryPlugin {
      constructor(context, entry, name) {
        this.context = context;
        this.entry = entry;
        this.name = name;
      }
      apply(compiler) {
        compiler.hooks.compilation.tap(
          "SingleEntryPlugin",
          (compilation, { normalModuleFactory }) => {
            compilation.dependencyFactories.set(
              SingleEntryDependency,
              normalModuleFactory
            );
          }
        );

        compiler.hooks.make.tapAsync(
          "SingleEntryPlugin",
          (compilation, callback) => {
            const { entry, name, context } = this;

            const dep = SingleEntryPlugin.createDependency(entry, name);
            compilation.addEntry(context, dep, name, callback);
          }
        );
      }

      static createDependency(entry, name) {
        const dep = new SingleEntryDependency(entry);
        dep.loc = { name };
        return dep;
      }
    }

这里使用 SingleEntryPlugin 作为例子，配置单入口时会使用此插件，插件往 make 钩子会挂载了回调函数。它不但挂载了 make 钩子，还挂载了 compilation 钩子，这个钩子先于 make 钩子调用，为 compilation 对象的 dependencyFactories 中添加了值，这值是一个 key-value 对，key 是 SingleEntryDependency，值是 normalModuleFactory，normalModuleFactory 就是一种 modulefactory，我们后面在构建模块中用到。

compilation 编译步骤如下:

执行 make 钩子 => 执行 compilation 下的 addEntry 方法 => _addModuleChain (根据依赖, 递归所有模块, 拿到所有的模块链) => compilation.seal 方法, seal 方法下调用各种钩子, 生成 chunk 对象 => 控制权给到 compile, 执行回调 onCompiled => 调用 done 钩子, 一次构建完成

7. 修改代码后再次编译

当我们修改业务代码再次编译时, webpack-cli 会再次调用 compile.run(), 此时不会再次调用 webpack 函数