Webpack完整打包流程分析

前言

webpack 在前端工程领域起到了中流砥柱的作用，理解它的内部实现机制会对你的工程建设提供很大的帮助（不论是定制功能还是优化打包）。

下面我们基于 webpack5 源码结构，对整个打包流程进行简单梳理并进行实现，便与思考和理解每个阶段所做的事情，为今后扩展和定制工程化能力打下基础。

一、准备工作

在流程分析过程中我们会简单实现 webpack 的一些功能，部分功能的实现会借助第三方工具：

• tapable 提供 Hooks 机制来接入插件进行工作；
• babel 相关依赖可用于将源代码解析为 AST，进行模块依赖收集和代码改写。

// 创建仓库
mkdir webpack-demo && cd webpack-demo && npm init -y

// 安装 babel 相关依赖
npm install @babel/parser @babel/traverse @babel/types @babel/generator -D

// 安装 tapable（注册/触发事件流）和 fs-extra 文件操作依赖
npm install tapable fs-extra -D

接下来我们在 src 目录下新建两个入口文件和一个公共模块文件：

mkdir src && cd src && touch entry1.js && touch entry2.js && touch module.js

并分别为文件添加一些内容：

// src/entry1.js
const module = require('./module');
const start = () => 'start';
start();
console.log('entry1 module: ', module);

// src/entry2.js
const module = require('./module');
const end = () => 'end';
end();
console.log('entry2 module: ', module);

// src/module.js
const name = 'cegz';
module.exports = {
  name,
};

有了打包入口，我们再来创建一个 webpack.config.js 配置文件做一些基础配置：

// ./webpack.config.js
const path = require('path');
const CustomWebpackPlugin = require('./plugins/custom-webpack-plugin.js');

module.exports = {
  entry: {
    entry1: path.resolve(__dirname, './src/entry1.js'),
    entry2: path.resolve(__dirname, './src/entry2.js'),
  },
  context: process.cwd(),
  output: {
    path: path.resolve(__dirname, './build'),
    filename: '[name].js',
  },
  plugins: [new CustomWebpackPlugin()],
  resolve: {
    extensions: ['.js', '.ts'],
  },
  module: {
    rules: [
      {
        test: /\.js/,
        use: [
          path.resolve(__dirname, './loaders/transformArrowFnLoader.js'), // 转换箭头函数
        ],
      },
    ],
  },
};

以上配置，指定了两个入口文件，以及一个 output.build 输出目录，同时还指定了一个 plugin 和一个 loader。

接下来我们编写 webpack 的核心入口文件，来实现打包逻辑。这里我们创建 webpack 核心实现所需的文件：

// cd webpack-demo
mkdir lib && cd lib
touch webpack.js // webpack 入口文件
touch compiler.js // webpack 核心编译器
touch compilation.js // webpack 核心编译对象
touch utils.js // 工具函数

这里我们创建了两个比较相似的文件：compiler 和 compilation，在这里做下简要说明：

• compiler：webpack 的编译器，它提供的 run 方法可用于创建 compilation 编译对象来处理代码构建工作；
• compilation：由 compiler.run 创建生成，打包编译的工作都由它来完成，并将打包产物移交给 compiler 做输出写入操作。

对于入口文件 lib/webpack.js，你会看到大致如下结构：

// lib/webpack.js
function webpack(options) {
  ...
}

module.exports = webpack;

对于执行入口文件的测试用例，代码如下：

// 测试用例 webpack-demo/build.js
const webpack = require('./lib/webpack');
const config = require('./webpack.config');

const compiler = webpack(config);

// 调用run方法进行打包
compiler.run((err, stats) => {
  if (err) {
    console.log(err, 'err');
  }
  // console.log('构建完成！', stats.toJSON());
});

接下来，我们从 lib/webpack.js 入口文件，按照以下步骤开始分析打包流程。

1、初始化阶段 - webpack

• 合并配置项
• 创建 compiler
• 注册插件

2、编译阶段 - build

• 读取入口文件
• 从入口文件开始进行编译
• 调用 loader 对源代码进行转换
• 借助 babel 解析为 AST 收集依赖模块
• 递归对依赖模块进行编译操作

3、生成阶段 - seal

• 创建 chunk 对象
• 生成 assets 对象

4、写入阶段 - emit

二、初始化阶段

初始化阶段的逻辑集中在调用 webpack(config) 时候，下面我们来看看 webpack() 函数体内做了哪些事项。

2.1、读取与合并配置信息

通常，在我们的工程的根目录下，会有一个 webpack.config.js 作为 webpack 的配置来源；

除此之外，还有一种是通过 webpak bin cli 命令进行打包时，命令行上携带的参数也会作为 webpack 的配置。

在配置文件中包含了我们要让 webpack 打包处理的入口模块、输出位置、以及各种 loader、plugin 等；

在命令行上也同样可以指定相关的配置，且权重高于配置文件。（下面将模拟 webpack cli 参数合并处理）

所以，我们在 webpack 入口文件这里将先做一件事情：合并配置文件与命令行的配置。

// lib/webpack.js
function webpack(options) {
  // 1、合并配置项
  const mergeOptions = _mergeOptions(options);
  ...
}

function _mergeOptions(options) {
  const shellOptions = process.argv.slice(2).reduce((option, argv) => {
    // argv -> --mode=production
    const [key, value] = argv.split('=');
    if (key && value) {
      const parseKey = key.slice(2);
      option[parseKey] = value;
    }
    return option;
  }, {});
  return { ...options, ...shellOptions };
}

module.exports = webpack;

参考 webpack面试题详细解答

2.2、创建编译器（compiler）对象

好的程序结构离不开一个实例对象，webpack 同样也不甘示弱，其编译运转是由一个叫做 compiler 的实例对象来驱动运转。

在 compiler 实例对象上会记录我们传入的配置参数，以及一些串联插件进行工作的 hooks API。

同时，还提供了 run 方法启动打包构建，emitAssets 对打包产物进行输出磁盘写入。这部分内容后面介绍。

// lib/webpack.js
const Compiler = require('./compiler');

function webpack(options) {
  // 1、合并配置项
  const mergeOptions = _mergeOptions(options);
  // 2、创建 compiler
  const compiler = new Compiler(mergeOptions);
  ...
  return compiler;
}

module.exports = webpack;

Compiler 构造函数基础结构如下：

// core/compiler.js
const fs = require('fs');
const path = require('path');
const { SyncHook } = require('tapable'); // 串联 compiler 打包流程的订阅与通知钩子
const Compilation = require('./compilation'); // 编译构造函数

class Compiler {
  constructor(options) {
    this.options = options;
    this.context = this.options.context || process.cwd().replace(/\\/g, '/');
    this.hooks = {
      // 开始编译时的钩子
      run: new SyncHook(),
      // 模块解析完成，在向磁盘写入输出文件时执行
      emit: new SyncHook(),
      // 在输出文件写入完成后执行
      done: new SyncHook(),
    };
  }

  run(callback) {
    ...
  }

  emitAssets(compilation, callback) {
    ...
  }
}

module.exports = Compiler;

当需要进行编译时，调用 compiler.run 方法即可：

compiler.run((err, stats) => { ... });

2.3、插件注册

有 compiler 实例对象后，就可以注册配置文件中的一个个插件，在合适的时机来干预打包构建。

插件需要接收 compiler 对象作为参数，以此来对打包过程及产物产生 side effect。

插件的格式可以是函数或对象，如果为对象，需要自定义提供一个 apply 方法。常见的插件结构如下：

class WebpackPlugin {
  apply(compiler) {
    ...
  }
}

注册插件逻辑如下：

// lib/webpack.js
function webpack(options) {
  // 1、合并配置项
  const mergeOptions = _mergeOptions(options);
  // 2、创建 compiler
  const compiler = new Compiler(mergeOptions);
  // 3、注册插件，让插件去影响打包结果
  if (Array.isArray(options.plugins)) {
    for (const plugin of options.plugins) {
      if (typeof plugin === "function") {
        plugin.call(compiler, compiler); // 当插件为函数时
      } else {
        plugin.apply(compiler); // 如果插件是一个对象，需要提供 apply 方法。
      }
    }
  }
  return compiler;
}

到这里，webpack 的初始工作已经完成，接下来是调用 compiler.run() 进入编译构建阶段。

三、编译阶段

编译工作的起点是在 compiler.run，它会：

1. 发起构建通知，触发 hooks.run 通知相关插件；
2. 创建 compilation 编译对象；
3. 读取 entry 入口文件；
4. 编译 entry 入口文件；

3.1、创建 compilation 编译对象

模块的打包（build）和 代码生成（seal）都是由 compilation 来实现。

// lib/compiler.js
class Compiler {
  ...
  run(callback) {
    // 触发 run hook
    this.hooks.run.call();
    // 创建 compilation 编译对象
    const compilation = new Compilation(this);
    ...
  }
}

compilation 实例上记录了构建过程中的 entries、module、chunks、assets 等编译信息，同时提供 build 和 seal 方法进行代码构建和代码生成。

// lib/compilation.js
const fs = require('fs');
const path = require('path');
const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const generator = require('@babel/generator').default;
const t = require('@babel/types');
const { tryExtensions, getSourceCode } = require('./utils');

class Compilation {
  constructor(compiler) {
    this.compiler = compiler;
    this.context = compiler.context;
    this.options = compiler.options;
    // 记录当前 module code
    this.moduleCode = null;
    // 保存所有依赖模块对象
    this.modules = new Set();
    // 保存所有入口模块对象
    this.entries = new Map();
    // 所有的代码块对象
    this.chunks = new Set();
    // 存放本次产出的文件对象（与 chunks 一一对应）
    this.assets = {};
  }
  build() {}
  seal() {}
}

有了 compilation 对象后，通过执行 compilation.build 开始模块构建。

// lib/compiler.js
class Compiler {
  ...
  run(callback) {
    // 触发 run hook
    this.hooks.run.call();
    // 创建 compilation 编译对象
    const compilation = new Compilation(this);
    // 编译模块
    compilation.build();
  }
}

3.2、读取 entry 入口文件

构建模块首先从 entry 入口模块开始，此时首要工作是根据配置文件拿到入口模块信息。

entry 配置的方式多样化，如：可以不传（有默认值）、可以传入 string，也可以传入对象指定多个入口。

所以读取入口文件需要考虑并兼容这几种灵活配置方式。

// lib/compilation.js
class Compilation {
  ...
  build() {
    // 1、读取配置入口
    const entry = this.getEntry();
    ...
  }

  getEntry() {
    let entry = Object.create(null);
    const { entry: optionsEntry } = this.options;
    if (!optionsEntry) {
      entry['main'] = 'src/index.js'; // 默认找寻 src 目录进行打包
    } else if (typeof optionsEntry === 'string') {
      entry['main'] = optionsEntry;
    } else {
      entry = optionsEntry; // 视为对象，比如多入口配置
    }
    // 相对于项目启动根目录计算出相对路径
    Object.keys(entry).forEach((key) => {
      entry[key] = './' + path.posix.relative(this.context, entry[key]);
    });
    return entry;
  }
}

3.3、编译 entry 入口文件

拿到入口文件后，依次对每个入口进行构建。

// lib/compilation.js
class Compilation {
  ...
  build() {
    // 1、读取配置入口
    const entry = this.getEntry();
    // 2、构建入口模块
    Object.keys(entry).forEach((entryName) => {
      const entryPath = entry[entryName];
      const entryData = this.buildModule(entryName, entryPath);
      this.entries.set(entryName, entryData);
    });
  }
}

构建阶段执行如下操作：

1. 通过 fs 模块读取 entry 入口文件内容；
2. 调用 loader 来转换（更改）文件内容；
3. 为模块创建 module 对象，通过 AST 解析源代码收集依赖模块，并改写依赖模块的路径；
4. 如果存在依赖模块，递归进行上述三步操作；

读取文件内容：

// lib/compilation.js
class Compilation {
  ...
  buildModule(moduleName, modulePath) {
    // 1. 读取文件原始代码
    const originSourceCode = fs.readFileSync(modulePath, 'utf-8');
    this.moduleCode = originSourceCode;
    ...
  }
}

调用 loader 转换源代码：

// lib/compilation.js
class Compilation {
  ...
  buildModule(moduleName, modulePath) {
    // 1. 读取文件原始代码
    const originSourceCode = fs.readFileSync(modulePath, 'utf-8');
    this.moduleCode = originSourceCode;
    // 2. 调用 loader 进行处理
    this.runLoaders(modulePath);
    ...
  }
}

loader 本身是一个 JS 函数，接收模块文件的源代码作为参数，经过加工改造后返回新的代码。

// lib/compilation.js
class Compilation {
  ...
  runLoaders(modulePath) {
    const matchLoaders = [];
    // 1、找到与模块相匹配的 loader
    const rules = this.options.module.rules;
    rules.forEach((loader) => {
      const testRule = loader.test;
      if (testRule.test(modulePath)) {
        // 如：{ test:/\.js$/g, use:['babel-loader'] }, { test:/\.js$/, loader:'babel-loader' }
        loader.loader ? matchLoaders.push(loader.loader) : matchLoaders.push(...loader.use);
      }
    });
    // 2. 倒序执行 loader
    for (let i = matchLoaders.length - 1; i >= 0; i--) {
      const loaderFn = require(matchLoaders[i]);
      // 调用 loader 处理源代码
      this.moduleCode = loaderFn(this.moduleCode);
    }
  }
}

执行 webpack 模块编译逻辑：

// lib/compilation.js
class Compilation {
  ...
  buildModule(moduleName, modulePath) {
    // 1. 读取文件原始代码
    const originSourceCode = fs.readFileSync(modulePath, 'utf-8');
    this.moduleCode = originSourceCode;
    // 2. 调用 loader 进行处理
    this.runLoaders(modulePath);
    // 3. 调用 webpack 进行模块编译 为模块创建 module 对象
    const module = this.handleWebpackCompiler(moduleName, modulePath);
    return module; // 返回模块
  }
}

1. 创建 module 对象；
2. 对 module code 解析为 AST 语法树；
3. 遍历 AST 去识别 require 模块语法，将模块收集在 module.dependencies 之中，并改写 require 语法为 __webpack_require__；
4. 将修改后的 AST 转换为源代码；
5. 若存在依赖模块，深度递归构建依赖模块。

// lib/compilation.js
class Compilation {
  ...
  handleWebpackCompiler(moduleName, modulePath) {
    // 1、创建 module
    const moduleId = './' + path.posix.relative(this.context, modulePath);
    const module = {
      id: moduleId, // 将当前模块相对于项目启动根目录计算出相对路径 作为模块ID
      dependencies: new Set(), // 存储该模块所依赖的子模块
      entryPoint: [moduleName], // 该模块所属的入口文件
    };

    // 2、对模块内容解析为 AST，收集依赖模块，并改写模块导入语法为 __webpack_require__
    const ast = parser.parse(this.moduleCode, {
      sourceType: 'module',
    });

    // 遍历 ast，识别 require 语法
    traverse(ast, {
      CallExpression: (nodePath) => {
        const node = nodePath.node;
        if (node.callee.name === 'require') {
          const requirePath = node.arguments[0].value;
          // 寻找模块绝对路径
          const moduleDirName = path.posix.dirname(modulePath);
          const absolutePath = tryExtensions(
            path.posix.join(moduleDirName, requirePath),
            this.options.resolve.extensions,
            requirePath,
            moduleDirName
          );
          // 创建 moduleId
          const moduleId = './' + path.posix.relative(this.context, absolutePath);
          // 将 require 变成 __webpack_require__ 语句
          node.callee = t.identifier('__webpack_require__');
          // 修改模块路径（参考 this.context 的相对路径）
          node.arguments = [t.stringLiteral(moduleId)];

          if (!Array.from(this.modules).find(module => module.id === moduleId)) {
            // 在模块的依赖集合中记录子依赖
            module.dependencies.add(moduleId);
          } else {
            // 已经存在模块集合中。虽然不添加进入模块编译 但是仍要在这个模块上记录被依赖的入口模块
            this.modules.forEach((module) => {
              if (module.id === moduleId) {
                module.entryPoint.push(moduleName);
              }
            });
          }
        }
      },
    });

    // 3、将 ast 生成新代码
    const { code } = generator(ast);
    module._source = code;

    // 4、深度递归构建依赖模块
    module.dependencies.forEach((dependency) => {
      const depModule = this.buildModule(moduleName, dependency);
      // 将编译后的任何依赖模块对象加入到 modules 对象中去
      this.modules.add(depModule);
    });

    return module;
  }
}

通常我们 require 一个模块文件时习惯不去指定文件后缀，默认会查找 .js 文件。

这跟我们在配置文件中指定的 resolve.extensions 配置有关，在 tryExtensions 方法中会尝试为每个未填写后缀的 Path 应用 resolve.extensions：

// lib/utils.js
const fs = require('fs');

function tryExtensions(
  modulePath,  extensions,  originModulePath,  moduleContext
) {
  // 优先尝试不需要扩展名选项（用户如果已经传入了后缀，那就使用用户填入的，无需再应用 extensions）
  extensions.unshift('');
  for (let extension of extensions) {
    if (fs.existsSync(modulePath + extension)) {
      return modulePath + extension;
    }
  }
  // 未匹配对应文件
  throw new Error(
    `No module, Error: Can't resolve ${originModulePath} in  ${moduleContext}`
  );
}

module.exports = {
  tryExtensions,
  ...
}

至此，「编译阶段」到此结束，接下来是「生成阶段」 seal。

四、生成阶段

在「编译阶段」会将一个个文件构建成 module 存储在 this.modules 之中。

在「生成阶段」，会根据 entry 创建对应 chunk 并从 this.modules 中查找被 entry 所依赖的 module 集合。

最后，结合 runtime webpack 模块机制运行代码，经过拼接生成最终的 assets 产物。

// lib/compiler.js
class Compiler {
  ...
  run(callback) {
    // 触发 run hook
    this.hooks.run.call();
    // 创建 compilation 编译对象
    const compilation = new Compilation(this);
    // 编译模块
    compilation.build();
    // 生成产物
    compilation.seal();
    ...
  }
}

entry + module --> chunk --> assets 过程如下：

// lib/compilation.js
class Compilation {
  ...
  seal() {
    // 1、根据 entry 创建 chunk
    this.entries.forEach((entryData, entryName) => {
      // 根据当前入口文件和模块的相互依赖关系，组装成为一个个包含当前入口所有依赖模块的 chunk
      this.createChunk(entryName, entryData);
    });
    // 2、根据 chunk 创建 assets
    this.createAssets();
  }

  // 根据入口文件和依赖模块组装chunks
  createChunk(entryName, entryData) {
    const chunk = {
      // 每一个入口文件作为一个 chunk
      name: entryName,
      // entry build 后的数据信息
      entryModule: entryData,
      // entry 的所依赖模块
      modules: Array.from(this.modules).filter((i) =>
        i.entryPoint.includes(entryName)
      ),
    };
    // add chunk
    this.chunks.add(chunk);
  }

  createAssets() {
    const output = this.options.output;
    // 根据 chunks 生成 assets
    this.chunks.forEach((chunk) => {
      const parseFileName = output.filename.replace('[name]', chunk.name);
      // 为每一个 chunk 文件代码拼接 runtime 运行时语法
      this.assets[parseFileName] = getSourceCode(chunk);
    });
  }
}

getSourceCode 是将 entry 和 modules 组合而成的 chunk，接入到 runtime 代码模板之中。

// lib/utils.js
function getSourceCode(chunk) {
  const { entryModule, modules } = chunk;
  return `  (() => {    var __webpack_modules__ = {      ${modules        .map((module) => {          return `          '${module.id}': (module) => {            ${module._source}
      }        `;        })        .join(',')}
    };    var __webpack_module_cache__ = {};    function __webpack_require__(moduleId) {      var cachedModule = __webpack_module_cache__[moduleId];      if (cachedModule !== undefined) {        return cachedModule.exports;      }      var module = (__webpack_module_cache__[moduleId] = {        exports: {},      });      __webpack_modules__[moduleId](module, module.exports, __webpack_require__);      return module.exports;    }    (() => {      ${entryModule._source}
    })();  })();  `;
}

到这里，「生成阶段」处理完成，这也意味着 compilation 编译工作的完成，接下来我们回到 compiler 进行最后的「产物输出」。

五、写入阶段

「写入阶段」比较容易理解，assets 上已经拥有了最终打包后的代码内容，最后要做的就是将代码内容写入到本地磁盘之中。

// lib/compiler.js
class Compiler {
  ...
  run(callback) {
    // 触发 run hook
    this.hooks.run.call();
    // 创建 compilation 编译对象
    const compilation = new Compilation(this);
    // 编译模块
    compilation.build();
    // 生成产物
    compilation.seal();
    // 输出产物
    this.emitAssets(compilation, callback);
  }

  emitAssets(compilation, callback) {
    const { entries, modules, chunks, assets } = compilation;
    const output = this.options.output;

    // 调用 Plugin emit 钩子
    this.hooks.emit.call();

    // 若 output.path 不存在，进行创建
    if (!fs.existsSync(output.path)) {
      fs.mkdirSync(output.path);
    }

    // 将 assets 中的内容写入文件系统中
    Object.keys(assets).forEach((fileName) => {
      const filePath = path.join(output.path, fileName);
      fs.writeFileSync(filePath, assets[fileName]);
    });

    // 结束之后触发钩子
    this.hooks.done.call();

    callback(null, {
      toJSON: () => {
        return {
          entries,
          modules,
          chunks,
          assets,
        };
      },
    });
  }
}

至此，webpack 的打包流程就以完成。

接下来我们完善配置文件中未实现的 loader 和 plugin，然后调用测试用例，测试一下上面的实现。

六、编写 loader

在 webpack.config.js 中我们为 .js 文件类型配置了一个自定义 loader 来转换文件内容：

// webpack.config.js
module: {
  rules: [
    {
      test: /\.js/,
      use: [
        path.resolve(__dirname, './loaders/transformArrowFnLoader.js'),
      ],
    },
  ],
},

loader 本身是一个函数，接收文件模块内容作为参数，经过改造处理返回新的文件内容。

下面我们在 loaders/transformArrowFnLoader.js 中，对文件中使用到的箭头函数，转换为普通函数，来理解 webpack loader 的作用。

// loaders/transformArrowFnLoader.js
const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const generator = require('@babel/generator').default;
const t = require('@babel/types');

function transformArrowLoader(sourceCode) {
  const ast = parser.parse(sourceCode, {
    sourceType: 'module'
  });
  traverse(ast, {
    ArrowFunctionExpression(path, state) {
      const node = path.node;
      const body = path.get('body');
      const bodyNode = body.node;
      if (bodyNode.type !== 'BlockStatement') {
        const statements = [];
        statements.push(t.returnStatement(bodyNode));
        node.body = t.blockStatement(statements);
      }
      node.type = "FunctionExpression";
    }
  });
  const { code } = generator(ast);

  return code;
}

module.exports = transformArrowLoader;

最终，箭头函数经过处理后变成如下结构：

const start = () => 'start';
    ||
    ||
const start = function () {
  return 'start';
};

七、编写插件

从上面介绍我们了解到，每个插件都需要提供一个 apply 方法，此方法接收 compiler 作为参数。

通过 compiler 可以去订阅 webpack 工作期间不同阶段的 hooks，以此来影响打包结果或者做一些定制操作。

下面我们编写自定义插件，绑定两个不同时机的 compiler.hooks 来扩展 webpack 打包功能：

• hooks.emit.tap 绑定一个函数，在 webpack 编译资源完成，输出写入磁盘前执行（可以做清除 output.path 目录操作）；
• hooks.done.tap 绑定一个函数，在 webpack 写入磁盘完成之后执行（可以做一些静态资源 copy 操作）。

// plugins/custom-webpack-plugins
const fs = require('fs-extra');
const path = require('path');

class CustomWebpackPlugin {
  apply(compiler) {
    const outputPath = compiler.options.output.path;
    const hooks = compiler.hooks;

    // 清除 build 目录
    hooks.emit.tap('custom-webpack-plugin', (compilation) => {
      fs.removeSync(outputPath);
    });

    // copy 静态资源
    const otherFilesPath = path.resolve(__dirname, '../src/otherfiles');
    hooks.done.tap('custom-webpack-plugin', (compilation) => {
      fs.copySync(otherFilesPath, path.resolve(outputPath, 'otherfiles'));
    });
  }
}

module.exports = CustomWebpackPlugin;

现在，我们通过 node build.js 运行文件，最终会在 webpack-demo 下生成 build 目录以及入口打包资源。

文末

相信读完本篇文章，你对 webpack 的打包思路有了清晰的认识。