从输入指令开始

平时使用webpack时，大致可以分为如下几种形式：
1、直接在控制台输入webpack指令，这种情况下最直接执行到的文件是./node_modules/bin/webpack.js或者/node_modules/webpack/bin/webpack.js，前者为后者的软链
2、通常写好一个类似dev-server.js/build.js的node脚本，通过npm run dev/npn run build指令去执行，这种情况通常会require(‘webpack’)直接拿到位于./node_modules/webpack/lib/webpack.js的webpack方法传入config，手动调用compiler.run执行
3、第三方库封装好的一些指令，例如create-react-app vue-cli-service，这种情况和第2种类似

接下来我们重点分析第1种情况是怎么调用到./node_modules/webpack/lib/webpack.js的：
在/node_modules/webpack/bin/webpack.js文件中，会调用runCli：

  1. const cli = {
  2.     name: "webpack-cli",
  3.     package: "webpack-cli",
  4.     binName: "webpack-cli",
  5.     installed: isInstalled("webpack-cli"),
  6.     url: "https://github.com/webpack/webpack-cli"
  7. };
  9. if (!cli.installed) {
  10.   // 没有安装cli的情况，可以忽略
  11. } else {
  12.     runCli(cli);
  13. }
  1. const runCli = cli => {
  2.     const path = require("path");
  3.     const pkgPath = require.resolve(`${cli.package}/package.json`);
  4.     // eslint-disable-next-line node/no-missing-require
  5.     const pkg = require(pkgPath);
  6.     // eslint-disable-next-line node/no-missing-require
  7.     require(path.resolve(path.dirname(pkgPath), pkg.bin[cli.binName]));
  8. };

很显然，上面代码中第7行，require的路径为
./node_modules/webpack-cli/bin/cli.js
调用require解析完该文件之后，就会执行里面的runCLI方法：

  1. #!/usr/bin/env node
  3. "use strict";
  5. const importLocal = require("import-local");
  6. const runCLI = require("../lib/bootstrap");
  8. if (!process.env.WEBPACK_CLI_SKIP_IMPORT_LOCAL) {
  9.   // Prefer the local installation of `webpack-cli`
  10.   if (importLocal(__filename)) {
  11.     return;
  12.   }
  13. }
  15. process.title = "webpack";
  17. runCLI(process.argv);

可以进一步去../lib/bootstrap寻找runCLI的定义：

  1. const WebpackCLI = require("./webpack-cli");
  3. const runCLI = async (args) => {
  4.   // Create a new instance of the CLI object
  5.   const cli = new WebpackCLI();
  7.   try {
  8.     await cli.run(args);
  9.   } catch (error) {
  10.     cli.logger.error(error);
  11.     process.exit(2);
  12.   }
  13. };
  15. module.exports = runCLI;

再进一步去./webpack-cli中寻找WebpackCLI.run方法的定义，这个方法非常长，大约有750行，以下是简化后的结果：

  2.   async run(args, parseOptions) {
  3.     // Built-in internal commands
  4.     const buildCommandOptions = {
  5.       name: "build [entries...]",
  6.       alias: ["bundle", "b"],
  7.       description: "Run webpack (default command, can be omitted).",
  8.       usage: "[entries...] [options]",
  9.       dependencies: [WEBPACK_PACKAGE],
  10.     };
  11.     const watchCommandOptions = {
  12.       name: "watch [entries...]",
  13.       alias: "w",
  14.       description: "Run webpack and watch for files changes.",
  15.       usage: "[entries...] [options]",
  16.       dependencies: [WEBPACK_PACKAGE],
  17.     };
  18.     const versionCommandOptions = {
  19.       name: "version [commands...]",
  20.       alias: "v",
  21.       description:
  22.         "Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and commands.",
  23.     };
  24.     const helpCommandOptions = {
  25.       name: "help [command] [option]",
  26.       alias: "h",
  27.       description: "Display help for commands and options.",
  28.     };
  29.     // Built-in external commands
  30.     const externalBuiltInCommandsInfo = [
  31.       {
  32.         name: "serve [entries...]",
  33.         alias: ["server", "s"],
  34.         pkg: "@webpack-cli/serve",
  35.       },
  36.       {
  37.         name: "info",
  38.         alias: "i",
  39.         pkg: "@webpack-cli/info",
  40.       },
  41.       {
  42.         name: "init",
  43.         alias: ["create", "new", "c", "n"],
  44.         pkg: "@webpack-cli/generators",
  45.       },
  46.       {
  47.         name: "loader",
  48.         alias: "l",
  49.         pkg: "@webpack-cli/generators",
  50.       },
  51.       {
  52.         name: "plugin",
  53.         alias: "p",
  54.         pkg: "@webpack-cli/generators",
  55.       },
  56.       {
  57.         name: "migrate",
  58.         alias: "m",
  59.         pkg: "@webpack-cli/migrate",
  60.       },
  61.       {
  62.         name: "configtest [config-path]",
  63.         alias: "t",
  64.         pkg: "@webpack-cli/configtest",
  65.       },
  66.     ];
  68.     const knownCommands = [
  69.       buildCommandOptions,
  70.       watchCommandOptions,
  71.       versionCommandOptions,
  72.       helpCommandOptions,
  73.       ...externalBuiltInCommandsInfo,
  74.     ];
  75.     const getCommandName = (name) => name.split(" ")[0];
  76.     const isKnownCommand = (name) =>
  77.       knownCommands.find(
  78.         (command) =>
  79.           getCommandName(command.name) === name ||
  80.           (Array.isArray(command.alias) ? command.alias.includes(name) : command.alias === name),
  81.       );
  82.     const isCommand = (input, commandOptions) => {
  83.       const longName = getCommandName(commandOptions.name);
  85.       if (input === longName) {
  86.         return true;
  87.       }
  89.       if (commandOptions.alias) {
  90.         if (Array.isArray(commandOptions.alias)) {
  91.           return commandOptions.alias.includes(input);
  92.         } else {
  93.           return commandOptions.alias === input;
  94.         }
  95.       }
  97.       return false;
  98.     };
  99.     const findCommandByName = (name) =>
  100.       this.program.commands.find(
  101.         (command) => name === command.name() || command.aliases().includes(name),
  102.       );
  103.     const isOption = (value) => value.startsWith("-");
  104.     const isGlobalOption = (value) =>
  105.       value === "--color" ||
  106.       value === "--no-color" ||
  107.       value === "-v" ||
  108.       value === "--version" ||
  109.       value === "-h" ||
  110.       value === "--help";
  112.     const loadCommandByName = async (commandName, allowToInstall = false) => {};
  114.     // Register own exit
  115.     this.program.exitOverride(async (error) => {});
  117.     // Default `--color` and `--no-color` options
  118.     const cli = this;
  119.     this.program.option("--color", "Enable colors on console.");
  120.     this.program.on("option:color", function () {
  121.       const { color } = this.opts();
  123.       cli.isColorSupportChanged = color;
  124.       cli.colors = cli.createColors(color);
  125.     });
  126.     this.program.option("--no-color", "Disable colors on console.");
  127.     this.program.on("option:no-color", function () {
  128.       const { color } = this.opts();
  130.       cli.isColorSupportChanged = color;
  131.       cli.colors = cli.createColors(color);
  132.     });
  134.     // Make `-v, --version` options
  135.     // Make `version|v [commands...]` command
  136.     const outputVersion = async (options) => {};
  137.     this.program.option(
  138.       "-v, --version",
  139.       "Output the version number of 'webpack', 'webpack-cli' and 'webpack-dev-server' and commands.",
  140.     );
  142.     const outputHelp = async (options, isVerbose, isHelpCommandSyntax, program) => {}
  143.     this.program.helpOption(false);
  144.     this.program.addHelpCommand(false);
  145.     this.program.option("-h, --help [verbose]", "Display help for commands and options.");
  147.     let isInternalActionCalled = false;
  149.     // Default action
  150.     this.program.usage("[options]");
  151.     this.program.allowUnknownOption(true);
  152.     this.program.action(async (options, program) => {});
  154.     await this.program.parseAsync(args, parseOptions);
  155.   }

可以看到最后对我们输入的参数进行了解析，虽然我们并不能确定parseAsync这个方法干了什么，但我们可以猜测到，如果我们想要执行开发或生产环境的编译，一定要走到一个加载webpack并传入配置执行的方法里面，这个方法就是runWebpack

  async runWebpack(options, isWatchCommand) {
    // eslint-disable-next-line prefer-const
    let compiler;
    let createJsonStringifyStream;

    if (options.json) {
      const jsonExt = await this.tryRequireThenImport("@discoveryjs/json-ext");

      createJsonStringifyStream = jsonExt.stringifyStream;
    }

    const callback = (error, stats) => {
      if (error) {
        this.logger.error(error);
        process.exit(2);
      }

      if (stats.hasErrors()) {
        process.exitCode = 1;
      }

      if (!compiler) {
        return;
      }

      const statsOptions = compiler.compilers
        ? {
            children: compiler.compilers.map((compiler) =>
              compiler.options ? compiler.options.stats : undefined,
            ),
          }
        : compiler.options
        ? compiler.options.stats
        : undefined;

      // TODO webpack@4 doesn't support `{ children: [{ colors: true }, { colors: true }] }` for stats
      const statsForWebpack4 = this.webpack.Stats && this.webpack.Stats.presetToOptions;

      if (compiler.compilers && statsForWebpack4) {
        statsOptions.colors = statsOptions.children.some((child) => child.colors);
      }

      if (options.json && createJsonStringifyStream) {
        const handleWriteError = (error) => {
          this.logger.error(error);
          process.exit(2);
        };

        if (options.json === true) {
          createJsonStringifyStream(stats.toJson(statsOptions))
            .on("error", handleWriteError)
            .pipe(process.stdout)
            .on("error", handleWriteError)
            .on("close", () => process.stdout.write("\n"));
        } else {
          createJsonStringifyStream(stats.toJson(statsOptions))
            .on("error", handleWriteError)
            .pipe(fs.createWriteStream(options.json))
            .on("error", handleWriteError)
            // Use stderr to logging
            .on("close", () => {
              process.stderr.write(
                `[webpack-cli] ${this.colors.green(
                  `stats are successfully stored as json to ${options.json}`,
                )}\n`,
              );
            });
        }
      } else {
        const printedStats = stats.toString(statsOptions);

        // Avoid extra empty line when `stats: 'none'`
        if (printedStats) {
          this.logger.raw(printedStats);
        }
      }
    };

    const env =
      isWatchCommand || options.watch
        ? { WEBPACK_WATCH: true, ...options.env }
        : { WEBPACK_BUNDLE: true, WEBPACK_BUILD: true, ...options.env };

    options.argv = { ...options, env };

    if (isWatchCommand) {
      options.watch = true;
    }

    compiler = await this.createCompiler(options, callback);

    if (!compiler) {
      return;
    }

    const isWatch = (compiler) =>
      compiler.compilers
        ? compiler.compilers.some((compiler) => compiler.options.watch)
        : compiler.options.watch;

    if (isWatch(compiler) && this.needWatchStdin(compiler)) {
      process.stdin.on("end", () => {
        process.exit(0);
      });
      process.stdin.resume();
    }
  }
}