vue-cli3到底是如何调用webpack开始进行实际构建的?-灵析社区

编程界菜niao

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

阅读量:409

点赞量:12

问AI
可以看看webpack的源代码,lib/Compiler.js和lib/Compilation.js文件,这两个文件包含了大部分构建逻辑。 "企业微信截图_16938212876133.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250110/277981cd2216a8fb7cff6fa3e3a04a1b.png)