Webpack 构建流程简单说一下

问题解析

Webpack 构建流程是理解 Webpack 工作原理的核心。面试官通过此题考察候选人对 Webpack 内部机制的掌握程度，以及是否具备源码级理解能力。

核心概念

Webpack 构建流程可以概括为 7 个阶段：初始化参数 → 开始编译 → 确定入口 → 编译模块 → 完成编译 → 输出资源 → 输出完成。整个过程基于 Tapable 的事件流机制驱动。

详细解答

构建流程图

初始化参数 → 开始编译 → 确定入口 → 编译模块 → 完成编译 → 输出资源 → 输出完成
    ↓           ↓          ↓          ↓          ↓          ↓          ↓
 合并配置    创建Compiler  解析entry  调用Loader  得到模块    组装Chunk  写入文件
 Shell+文件   加载插件    找出文件   递归依赖    依赖关系   生成文件    系统

1. 初始化参数

从配置文件（webpack.config.js）和 Shell 语句中读取并合并参数，得到最终配置。

// 内部简化逻辑
const configPath = path.resolve('webpack.config.js');
const config = require(configPath);

// 合并 Shell 参数
const finalOptions = merge(config, shellOptions);

2. 开始编译

初始化 Compiler 对象，加载所有配置的插件，执行 run 方法开始编译。

// Compiler 创建简化示意
class Compiler {
  constructor(context) {
    this.hooks = {
      beforeRun: new AsyncSeriesHook(['compiler']),
      run: new AsyncSeriesHook(['compiler']),
      compile: new SyncHook(['params']),
      make: new AsyncParallelHook(['compilation']),
      emit: new AsyncSeriesHook(['compilation'])
    };
  }

  run(callback) {
    // 触发 run 钩子
    this.hooks.run.callAsync(this, (err) => {
      if (err) return callback(err);
      this.compile(callback);
    });
  }
}

3. 确定入口

根据 entry 配置找出所有入口文件。

// entry 配置示例
module.exports = {
  entry: {
    main: './src/index.js',
    vendor: './src/vendor.js'
  }
};

// 内部处理为
const entries = {
  main: ['/project/src/index.js'],
  vendor: ['/project/src/vendor.js']
};

4. 编译模块

从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，递归进行编译。

// 模块编译简化流程
function buildModule(modulePath) {
  // 1. 读取文件内容
  const source = fs.readFileSync(modulePath, 'utf-8');

  // 2. 调用 Loader 处理
  const loaders = getMatchedLoaders(modulePath);
  const transformedSource = runLoaders(loaders, source);

  // 3. 解析依赖
  const dependencies = parseDependencies(transformedSource);

  // 4. 递归处理依赖
  dependencies.forEach(dep => buildModule(dep));

  return {
    source: transformedSource,
    dependencies
  };
}

5. 完成编译

得到每个模块被翻译后的内容以及它们之间的依赖关系图（Dependency Graph）。

// 模块依赖图结构
const dependencyGraph = {
  '/project/src/index.js': {
    id: 0,
    source: '...',  // 编译后的代码
    dependencies: ['./a.js', './b.js'],
    mapping: {
      './a.js': 1,
      './b.js': 2
    }
  },
  '/project/src/a.js': {
    id: 1,
    source: '...',
    dependencies: []
  }
};

6. 输出资源

根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表。

// Chunk 组装逻辑
function createChunks(entries, modules) {
  const chunks = [];

  for (const [name, entryModule] of Object.entries(entries)) {
    const chunk = {
      name,
      modules: collectModules(entryModule) // 收集所有依赖模块
    };
    chunks.push(chunk);
  }

  return chunks;
}

// 生成输出文件
function generateFiles(chunks) {
  const files = {};

  chunks.forEach(chunk => {
    const code = bundleModules(chunk.modules);
    files[`${chunk.name}.js`] = code;
  });

  return files;
}

7. 输出完成

在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入文件系统。

// 文件输出
function emitFiles(files, outputPath) {
  Object.entries(files).forEach(([filename, content]) => {
    const filePath = path.join(outputPath, filename);
    fs.writeFileSync(filePath, content);
  });
}

深入理解

核心对象关系

// Webpack 核心对象关系
Compiler {
  options: {},        // 配置
  hooks: {},          // 生命周期钩子
  context: '',        // 项目根目录

  run() {             // 启动编译
    newCompilation()  // 创建 Compilation
  }
}

Compilation {
  modules: [],        // 所有模块
  chunks: [],         // 所有代码块
  assets: {},         // 输出资源

  addEntry() {        // 添加入口
    buildModule()     // 构建模块
  },
  seal() {            // 封装
    createChunks()    // 创建 Chunk
  }
}

关键钩子执行顺序

// 构建过程中的关键钩子
compiler.hooks.beforeRun    // 运行前
compiler.hooks.run          // 开始运行
compiler.hooks.beforeCompile // 编译前
compiler.hooks.compile      // 开始编译
compiler.hooks.make         // 分析入口，创建模块
compiler.hooks.afterCompile // 编译完成
compiler.hooks.emit         // 发射资源前
compiler.hooks.afterEmit    // 发射资源后
ccompiler.hooks.done        // 完成

模块封装原理

// Webpack 打包后的模块格式
(function(modules) {
  // Webpack 启动函数
  function __webpack_require__(moduleId) {
    // 模块缓存
    if (installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }

    // 创建模块
    var module = installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {}
    };

    // 执行模块
    modules[moduleId].call(
      module.exports,
      module,
      module.exports,
      __webpack_require__
    );

    module.l = true;
    return module.exports;
  }

  // 加载入口模块
  return __webpack_require__(__webpack_require__.s = 0);
})({
  0: function(module, exports, __webpack_require__) {
    // 入口模块代码
    var a = __webpack_require__(1);
    console.log(a);
  },
  1: function(module, exports) {
    // 模块 a 的代码
    module.exports = 'Hello';
  }
});

最佳实践

1. 利用生命周期优化构建

// 在特定阶段执行优化
class BuildOptimizerPlugin {
  apply(compiler) {
    // 编译前清理缓存
    compiler.hooks.beforeCompile.tap('OptimizePlugin', () => {
      console.log('准备编译...');
    });

    // 编译完成后分析
    compiler.hooks.done.tap('OptimizePlugin', (stats) => {
      console.log('编译耗时:', stats.endTime - stats.startTime);
    });
  }
}

2. 监控构建性能

// 分析各阶段耗时
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();

module.exports = smp.wrap({
  // webpack 配置
});

3. 理解 Chunk 生成策略

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

面试要点

7 个阶段要记牢：初始化参数 → 开始编译 → 确定入口 → 编译模块 → 完成编译 → 输出资源 → 输出完成
核心对象：Compiler（控制整个生命周期）和 Compilation（单次编译过程）
Tapable 机制：基于事件流的插件系统
模块封装：webpack_require 函数实现模块加载
Chunk 概念：根据依赖关系组装成的代码块
Loader 执行时机：在编译模块阶段，递归处理依赖时调用