.5-浅析webpack源码之入口函数

　　从convert-argv出来后，目前进度在这：

yargs.parse(process.argv.slice(2), (err, argv, output) => {// ...// 从这里出来var options = require("./convert-argv")(yargs, argv);// 跟convert-argv中的一样function ifArg(name, fn, init) { /* ... */ }// 传入返回的optionsfunction processOptions(options) {// ...// 这是个嘛???var outputOptions = options.stats;// 大量的ifArg命令处理outputOptions属性// 获取webpack主函数 var webpack = require("../lib/webpack.js");Error.stackTraceLimit = 30;var lastHash = null;var compiler;try {// 进入主函数compiler = webpack(options);} catch(err) { /* ... */ }// ...编译后回调
    }// 执行上面的函数
    processOptions(options);
});

　　声明了一个熟悉的ifArg函数后进入了processOptions函数，接下来是根据一些命名参数处理那个outputOptions属性，我怎么都找不到这个在哪里定义的，知道的人提醒一下。

　　因此，直接进入webpack主函数，传入返回的options对象作为参数。

webpack主函数

GO！

　　先给一张流程图总览：

　　主函数简化后源码如下：

const Compiler = require("./Compiler");
// ...模块引入function webpack(options, callback) {// 错误检测const webpackOptionsValidationErrors = validateSchema(webpackOptionsSchema, options);if(webpackOptionsValidationErrors.length) {throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);}let compiler;// 多配置if(Array.isArray(options)) {compiler = new MultiCompiler(options.map(options => webpack(options)));}// 单配置 else if(typeof options === "object") { /*...*/ } else {throw new Error("Invalid argument: options");}if(callback) { /*...*/ }return compiler;
}
exports = module.exports = webpack;webpack.WebpackOptionsDefaulter = WebpackOptionsDefaulter;
// ...属性挂载function exportPlugins( /*...*/ )exportPlugins( /*...*/ );
exportPlugins( /*...*/ );

　　可以主要分为以下几块：

1、工具模块引入

2、对配置对象进行错误检测

3、分多配置或单配置进行处理

4、执行回调函数

5、在webpack函数上挂载引入的模块

6、输出一些插件

　　引入的模块在用到的时候再讲，如果特别复杂的情形会尽量进行简化，不重要的地方也会适当跳过。

　　基本上会按照步骤来讲解。

转载于:https://www.cnblogs.com/QH-Jimmy/p/8025827.html

.5-浅析webpack源码之入口函数相关推荐

.17-浅析webpack源码之compile流程-入口函数run
本节流程如图: 现在正式进入打包流程,起步方法为run: Compiler.prototype.run = (callback) => {const startTime = Date.now() ...
webpack 源码分析（四）——complier模块
webpack 源码分析(四)--complier模块上一篇我们看到,webpack-cli 通过 yargs 对命令行传入的参数和配置文件里的配置项做了转换包装,然后传递给 webpack 的 c ...
webpack 源码分析系列 ——loader
想要更好的格式阅读体验,请查看原文:webpack 源码分析系列 --loader 为什么需要 loader webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具.内部通过构 ...
与springcloud整合的框架源码读取入口
前提最近开始准备系统全面的学习springcloud相关组件,过程中会记录并发表出来,今天就是从阅读源码的入口开始. 提疑就引入一个依赖一个注解怎么就可以将相关功能与springcloud给整 ...
webpack源码阅读——npm脚本运行webpack与命令行输入webpack的区别
原文地址:webpack源码阅读--npm脚本执行webpack与命令行输入webpack执行的区别如有错误,欢迎指正! webpack是目前被大家广为使用的模块打包器.从命令行输入webpack或 ...
jQuery源码分析-each函数
本文部分截取自且行且思 jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大,下面就这个函数做了详细讲解: 复制代码代码 /*! * jQuer ...
读 zepto 源码之工具函数
对角另一面读 zepto 源码之工具函数 Zepto 提供了丰富的工具函数,下面来一一解读. 源码版本本文阅读的源码为 zepto1.2.0 $.extend $.extend 方法可以用来扩展目 ...
帝国cms cj1.php,帝国cms源码中常用函数所在位置
帝国cms源码中常用函数所在位置发布时间:2014-03-28 15:00:26 作者:佚名我要评论帝国cms常用函数所在位置归总,使用帝国cms的朋友可以收藏下帝国cms常用函数所在 ...
webpack 源码泄露
0x01 漏洞简介 webpack是一个JavaScript应用程序的静态资源打包器(module bundler).它会递归构建一个依赖关系图(dependency graph),其中包含应用程序需 ...

.5-浅析webpack源码之入口函数

webpack主函数

.5-浅析webpack源码之入口函数相关推荐

最新文章

热门文章