Webpack CLI 执行流程深度解析

// webpack-cli/packages/webpack-cli/package.json
{
  "main": "lib/index.js",
  "bin": {
    "webpack-cli": "./bin/webpack-cli.js"
  }
}

webpack-cli/packages/webpack-cli/
├── bin/
│   └── webpack-cli.js        # 命令行入口（#!/usr/bin/env node）
├── src/
│   ├── index.ts              # 模块导出入口
│   ├── bootstrap.ts          # 启动引导（runCLI）
│   └── webpack-cli.ts        # 核心类（约 2500 行）
└── lib/                      # 编译产物

// src/webpack-cli.ts
import { Command } from 'commander';

class WebpackCLI {
  private program: Command;

  constructor() {
    this.program = new Command();
  }

  // 主入口方法
  async run(args: string[] = process.argv): Promise<void> { ... }

  // 参数处理
  async processArguments(command, options): Promise<void> { ... }

  // 创建编译器
  async createCompiler(options): Promise<Compiler> { ... }

  // 执行构建
  async runWebpack(options): Promise<void> { ... }
}

async run(args: string[] = process.argv) {
  // 定义 webpack 支持的所有配置选项
  const webpackOptions = {
    config: { /* 配置文件路径 */ },
    mode: { /* development | production | none */ },
    entry: { /* 入口模块 */ },
    output: { /* 输出配置 */ },
    // ... 更多选项
  };

  // 定义辅助函数
  const isCommand = (name: string) => { /* ... */ };
  const isOption = (name: string) => { /* ... */ };
}

// 使用 Commander.js 注册子命令
this.program
  .command('build')
  .description('Run webpack (default command)')
  .action(buildActionHandler);

this.program
  .command('serve')
  .description('Run webpack-dev-server')
  .action(serveActionHandler);

this.program
  .command('init')
  .description('Initialize a new webpack project')
  .action(initActionHandler);

// 一系列校验确保参数合法
outputHelpIfNeeded();              // --help 检查
checkForMissingAndRequiredOptions(); // 必要参数检查
checkForConflictingOptions();      // 冲突参数检查

// 第 1795 行 - 触发参数解析与命令执行
await this.program.parseAsync(this.args);

const commandName = this.getCommandName();
// webpack build  → 'build'
// webpack serve  → 'serve'
// webpack        → 'build'（默认命令）

// 订阅：注册 action 回调
this.program.action(async (options, program) => {
  const command = await this.getBuiltInCommand('build');
  return command;
});

// 发布：解析参数时自动触发
await this.program.parseAsync(args);
// 内部解析完成后 → 调用已注册的 actionHandler → 执行回调

import { Command } from 'commander';

class MiniCLI {
  private program: Command;
  private actionHandler: Function | null = null;

  constructor() {
    this.program = new Command();
  }

  run() {
    // 1. 注册回调（订阅）
    this.program.action(async (options, program) => {
      console.log('执行构建，options:', options);
      return 'build';
    });

    // 2. 保存 handler 引用
    this.actionHandler = (options: any, program: any) => {
      console.log('回调被执行');
    };

    // 3. 解析参数（发布）
    this.parseCommand();
  }

  private parseCommand() {
    if (this.actionHandler) {
      // 使用 apply 传递参数
      this.actionHandler.apply(null, [/* options, program */]);
    }
  }
}

new MiniCLI().run();