const webpack = require('webpack')

const compiler = webpack({
  // webpack 的诸多配置置于此处
  entry: './index.js'
})

compiler.run((err, stat) => {
  // 在 stat 中可获取关于构建的时间及资源等信息
})

webpack([
  {
    entry: './index.js',
    mode: 'production', // 用于生产，移除注释，压缩代码成 1 行
    output: {
      filename: 'main.production.js'
    }
  },
  {
    entry: './index.js',
    mode: 'development', // 用于代码分析，保留注释
    output: {
      filename: 'main.development.js'
    }
  },
  {
    entry: './index.js', // mode 默认 production
    output: {
      filename: 'main.unknown.js'
    }
  }
]).run((err, stat) => {

})

run(callback) {
  /* ----- 1 ----- */
  const finalCallback = (err, stats) => {
    /* codes */
    // 断点后，根据调用栈找到的外层的代码，callback 便是我们的回调。
    if (callback !== undefined) callback(err, stats); // callback 被调用
    /* codes */
  };


  // 接下去思路就是顺着调用栈继续找，看看 finalCallback 被谁调用
  class Stats {
    constructor(compilation) { // 直接存储一个对象
      this.compilation = compilation;
    }
  }
  
  /* ----- 2 ----- */
  const onCompiled = (err, compilation) => { // 打包完成
    /* codes */
    compilation.startTime = startTime;
    compilation.endTime = Date.now(); // endTime 的属性赋值

    const stats = new Stats(compilation); // stats 生成

    this.hooks.done.callAsync(stats, err => {
      if (err) return finalCallback(err); // finalCallback 被调用，错误流

      // 调用了 /* ----- 1 ----- */
      return finalCallback(null, stats);  // finalCallback 被调用，把 stats 作为第二个参数传递
    });			
  }


  // 接下去思路就是顺着调用栈继续找，看看 onCompiled 被谁调用

  
  /* ----- 3 ----- */
  // 有错提前返回  这块连续嵌套确实写得不太雅观，处理都一样
  const run = () => { // run 方法定义
    this.hooks.beforeRun.callAsync(this, err => { // 钩子 运行前
      if (err) return finalCallback(err); // finalCallback 被调用，错误流

      this.hooks.run.callAsync(this, err => { // 开始运行时
        if (err) return finalCallback(err); // finalCallback 被调用，错误流

        this.readRecords(err => { // 读取之前的 records 的方法，再在它的回调里执行 this.compile(onCompiled)
          if (err) return finalCallback(err); // finalCallback 被调用，错误流

          // 调用了 /* ----- 2 ----- */
          this.compile(onCompiled); // compile 被调用
        });
      });
    });/
  };


  // 接下去思路就是顺着调用栈继续找，看看 run 被谁调用

  const startTime = Date.now(); // startsTime 的赋值

  // 调用了 /* ----- 3 ----- */
  run(); // 执行 run
}

  // /node_modules/webpack-cli/bin/cli.js

  #!/usr/bin/env node // shebang 指定解释器

  /* codes */

  const runCLI = require("../lib/bootstrap");

  /* codes */

  // 取的是当前命令行参数，与webpack 和 webpack-cl 之间的跳转无关
  // npx webpack 使用的就是 node 且寻找到 webpack package.json 的 bin 字段 "bin/webpack.js"
  // 也可以输入 npx webpack -fsjfjd 能看到命令行参数数组也添加了后面乱输入的内容。
  // process.argv: [
  //  'xx/bin/node',
  //  '/node_modules/.bin/webpack' 软连接，指向 `node_modules/webpack/
  // ]
  runCLI(process.argv);

  // /node_modules/webpack-cli/lib/webpack-cli.js
  // module: 'webpack'
  async tryRequireThenImport(module, handleError = true) {
      let result; 
      try {
          result = require(module);
      }
      return result || {};
  }

  // /node_modules/webpack-cli/lib/webpack-cli.js
  const WEBPACK_PACKAGE = process.env.WEBPACK_PACKAGE || "webpack";
  async loadWebpack(handleError = true) {
      return this.tryRequireThenImport(WEBPACK_PACKAGE, handleError);
  }

    // /node_modules/webpack-cli/lib/webpack-cli.js
    // commandName: 'build'
    const loadCommandByName = async (commandName, allowToInstall = false) => {
            const isBuildCommandUsed = isCommand(commandName, buildCommandOptions);
            /* codes */
            if (isBuildCommandUsed) {
              /* codes */
              this.webpack = await this.loadWebpack();
              /* codes */     
            }
    }

    // /node_modules/webpack-cli/lib/webpack-cli.js
    // 这块代码可以略过，放在这里只是方便你调试时可以参考
    // 简化核心代码请看下块代码块
    this.program.action(async (options, program) => {
      const buildCommandOptions = {
        name: "build [entries...]",
        alias: ["bundle", "b"],
        description: "Run webpack (default command, can be omitted).",
        usage: "[entries...] [options]",
        dependencies: [WEBPACK_PACKAGE],
      };
      const { operands, unknown } = this.program.parseOptions(program.args);

      const defaultCommandToRun = getCommandName(buildCommandOptions.name); // 'build'

      const hasOperand = typeof operands[0] !== "undefined";
      const operand = hasOperand ? operands[0] : defaultCommandToRun; // 'build'

      let commandToRun = operand; // 'build'
      if (isKnownCommand(commandToRun)) { // true
          await loadCommandByName(commandToRun, true); // 传入 'build'
      }
    })

    this.program.action(async (options, program) => {
      let commandToRun = program.args[0] ? program.args[0] : 'build'
      if(commandToRun === 'build') {
        await loadCommandByName(commandToRun, true); // 传入 'build'
      }
    })

    action(fn) {
      const listener = (args) => {
        const actionResult = fn.apply(this, [{}, this]);
      };
      this._actionHandler = listener;
      return this;
    };

    _parseCommand(operands, unknown) {
      this.args = operands.concat(unknown);
    }

  // \node_modules\commander\index.js
  
  /* codes */
  // argv: ['xx/bin/node', '/node_modules/.bin/webpack']
  // parseOptions: undefined
  parse(argv, parseOptions) {
    /* codes */

    parseOptions = parseOptions || {}; 
    switch (parseOptions.from) {
      case undefined: // 此时因为 undefined 进入了
        this._scriptPath = argv[1]; // 'xx/bin/node'
        userArgs = argv.slice(2); // []
        break;
      /* codes */
    }

    this._parseCommand([], userArgs);
  }

  // 外层函数
  parseAsync(argv, parseOptions) {
    this.parse(argv, parseOptions);
  }

  // 更外层函数
  async run(args, parseOptions) {
    await this.program.parseAsync(args, parseOptions);
  }
  /* codes */ 

    const runCLI = async (args) => {
      const cli = new WebpackCLI();
      await cli.run(args);
    };

  /* codes */

  /* 主入口 */
  const webpack = (options, callback) => {
    // 通过 create 函数创建一个编译器 compiler，并返回
    if (callback) {
      try {
        const { compiler, watch, watchOptions } = create();
        /* codes */
        return compiler;
      } catch (err) {
        process.nextTick(() => callback(err));
        return null;
      }
    } else {
      const { compiler, watch } = create();
      /* codes */
      return compiler;
    }

    
    /* 1. 校验 options 配置是否正确
        2. 根据 options 构建编译器
    */
    const create = () => {
      // 校验 options 配置是否有错误。 options 转成数组，每个配置都进行预编译校验
      // webpackOptionsSchema：校验规则，一个 json 配置文件。
      if (!asArray(options).every(webpackOptionsSchemaCheck)) {
        getValidateSchema()(webpackOptionsSchema, options);

        // 有错抛错
        util.deprecate(
          () => {},
          "webpack bug: Pre-compiled schema reports error while real schema is happy. This has performance drawbacks.",
          "DEP_WEBPACK_PRE_COMPILED_SCHEMA_INVALID"
        )();
      }

      let compiler;
      let watch = false;
      let watchOptions;

      // 根据 options 新建 编译器
      if (Array.isArray(options)) {
        compiler = createMultiCompiler(
          options,
        );
        watch = options.some(options => options.watch);
        watchOptions = options.map(options => options.watchOptions || {});
      } else {
        const webpackOptions = (options);
        compiler = createCompiler(webpackOptions);
        watch = webpackOptions.watch;
        watchOptions = webpackOptions.watchOptions || {};
      }
      // 将编译器封装返回。
      return { compiler, watch, watchOptions };
    };



    /* 构建编译器 */
    const createCompiler = rawOptions => {
      // 为用户的 options 补全规范化声明。用户没声明到的都给补全了
      const options = getNormalizedWebpackOptions(rawOptions);

      // 为用户的配置做初始化，应用基础的默认值。主要负责日志方面的赋值。
      applyWebpackOptionsBaseDefaults(options);

      // 以上两步合并出基础配置


      const compiler = new Compiler(options.context, options);

      // NodeEnvironmentPlugin 主要负责文件I/O还有监听文件内容改变
      new NodeEnvironmentPlugin({
        infrastructureLogging: options.infrastructureLogging
      }).apply(compiler);


      // 插件的调用
      if (Array.isArray(options.plugins)) {
        for (const plugin of options.plugins) {
          if (typeof plugin === "function") {
            plugin.call(compiler, compiler);
          } else {
            plugin.apply(compiler);
          }
        }
      }
      
      // 为用户配置应用默认值，基本所有默认值都在这赋值。
      // 在这个函数内，可以看到会根据 mode，为不同配置赋值不同值。
      applyWebpackOptionsDefaults(options);

      compiler.hooks.environment.call(); // 调用钩子
      compiler.hooks.afterEnvironment.call(); // 调用钩子

      // WebpackOptionsApply 模块主要是根据options选项的配置，设置compile的相应的插件，属性。
      // 里面写了大量的 apply(compiler); 使得模块的this指向compiler，没有对options做任何处理
      new WebpackOptionsApply().process(options, compiler);

      compiler.hooks.initialize.call(); // 调用钩子
      
      return compiler;
    };
    
    /* codes */
  }