vue.js - vue-cli3到底是如何调用webpack开始进行实际构建的？

Question

从源码可以看到，执行npm run build命令后，先创建Service类的实例而后再调用其run方法，而run方法执行的则是build文件下index.js中注册的一个异步函数，一直追踪下去可以看到最终返回是在这里：

return new Promise((resolve, reject) => {    // 用webpack模块执行处理后的配置    webpack(webpackConfig, (err, stats) => {      stopSpinner(false);      if (err) {        return reject(err);      }      if (stats.hasErrors()) {        return reject(`Build failed with errors.`);      }      if (!args.silent) {        const targetDirShort = path.relative(api.service.context, targetDir);        log(formatStats(stats, targetDirShort, api));        if (args.target === "app" && !isLegacyBuild) {          if (!args.watch) {            done(              `Build complete. The ${chalk.cyan(                targetDirShort              )} directory is ready to be deployed.`            );            info(              `Check out deployment instructions at ${chalk.cyan(                `https://cli.vuejs.org/guide/deployment.html`              )}\n`            );          } else {            done(`Build complete. Watching for changes...`);          }        }      }      // test-only signal      if (process.env.VUE_CLI_TEST) {        console.log("Build complete.");      }      resolve();    });

可以看到其最终调用了一个通过const webpack = require("webpack")引入的webpack()，但点击跳转之后是一个types.d.ts文件，从这之后我就不明白后续是如何构建的，有没有了解vue-cli或webpack的大佬能说一下webpack()拿到配置后是如何构建的吗

Answer 1

可以看看webpack的源代码，lib/Compiler.js和lib/Compilation.js文件，这两个文件包含了大部分构建逻辑。