Webpack CLI build 命令执行流程

// 第一次进入 parseCommand
parseCommand() {
  // options 为空 → 返回默认 build 命令
  if (!options) {
    return this.getBuiltInCommand('build');
  }
}

// 第二次进入 parseCommand（action handler 触发后）
parseCommand() {
  // options 有值 → 进行命令分发
  if (options) {
    const commandName = options[0];
    this.dispatchCommand(commandName);
  }
}

async dispatch(command: string) {
  // 1. 检查是否有注册的子命令
  const subCommand = this.getSubCommand(command);
  if (subCommand) {
    return this.executeSubCommand(subCommand);
  }

  // 2. 执行生命周期钩子
  await this.chainOrCallSubCommandHooks();

  // 3. 执行 action handler
  await this.actionHandler(options, program);
}

// webpack-cli.ts 第 1213 行
async runWebpack() {
  let compiler: Compiler;

  // 获取环境变量
  const webpackBuildEnv = process.env.WEBPACK_BUILD;

  // 准备配置选项
  const options = {
    config: configPath,
    env: envOptions
  };

  // 非 watch 模式下创建 compiler
  if (!isWatch) {
    compiler = await this.createCompiler(options);
  }

  return compiler;
}

createCompiler(options) {
  // 步骤一：加载配置文件
  const config = this.loadConfig(options.config);

  // 步骤二：构建最终配置
  const builtConfig = this.buildConfig(config);

  // 步骤三：调用 webpack 核心库创建编译器
  const compiler = this.webpack(builtConfig, callback);

  return compiler;
}

loadConfig(configPath: string) {
  const configContent = fs.readFileSync(configPath, 'utf-8');
  return configContent;
}

// webpack-cli.ts 第 2184 行
buildConfig(config) {
  // 1. 检查 watch 模式
  const isWatchMode = config.watch;

  // 2. 获取构建选项
  const buildOptions = this.getBuildOptions(config);

  // 3. 使用 reduce 整合命令行参数
  const processedArgs = processArguments.reduce((acc, arg) => {
    return { ...acc, ...arg };
  }, {});

  // 4. 返回最终配置
  return {
    ...buildOptions,
    ...processedArgs,
    mode: config.mode,
    entry: config.entry
  };
}

loadWebpack() {
  try {
    return require('webpack');
  } catch (e) {
    // 降级为动态 import
    return import('webpack');
  }
}

// webpack/package.json
{ "main": "lib/index.js" }

// webpack/lib/index.js - 导出内容
module.exports = {
  webpack,          // 核心函数
  Compiler,         // 编译器类
  optimize,         // 优化相关
  library,          // 库输出相关
  // ...
};

// webpack/lib/webpack.js 第 110 行
const webpack = (options, callback) => {
  // 1. 验证配置合法性
  validateOptions(options);

  // 2. 创建 Compiler 实例
  const compiler = new Compiler(options.context);

  // 3. 如果提供回调则直接运行
  if (callback) {
    compiler.run(callback);
  }

  return compiler;
};