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

  • Z时代
  • 2024-03-10
  • 分类：IT

从源码可以看到，执行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()拿到配置后是如何构建的吗

回答：

可以看看webpack的源代码，lib/Compiler.js和lib/Compilation.js文件，这两个文件包含了大部分构建逻辑。
vue-cli3到底是如何调用webpack开始进行实际构建的？

以上是 vue-cli3到底是如何调用webpack开始进行实际构建的？ 的全部内容， 来源链接： utcz.com/p/934873.html

回到顶部