.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) { /* ... */ }

    // 传入返回的options
    function 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、输出一些插件

  

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

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

时间: 2024-08-30 14:28:04

.5-浅析webpack源码之入口函数的相关文章

webpack源码分析——配置调试环境

无论是阅读webpack源码,还是编写webpack的plugin和loader,配置调试环境都是很有必要的.weabpack的运行环境是nodejs,调试webpack就是调试nodejs程序.我们平时使用的IDE如eclipse.webstorm都支持nodejs的调试.本文以eclipse(Version: Oxygen.1a Release (4.7.1a))为例,进行讲解. 在这个例子里面,我们使用webpack <entry> [<entry>] <output&

ThinkPHP源码阅读2-----C函数配置文件详解

ThinkPHP的配置非常灵活,可自定义加载.大概看了一下,一共有这几个地方会加载配置文件,方便以后的读取 /** * 获取和设置配置参数 支持批量定义 * * @param string|array $name * 配置变量 * @param mixed $value * 配置值 * @return mixed */ function C($name = null, $value = null) { static $_config = array (); // 无参数时获取所有 if (emp

Python:SQLMap源码精读—start函数

源代码 1 def start(): 2 """ 3 This function calls a function that performs checks on both URL 4 stability and all GET, POST, Cookie and User-Agent parameters to 5 check if they are dynamic and SQL injection affected 6 """ 7 if n

jQuery源码分析-each函数

本文部分截取自且行且思 jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大,下面就这个函数做了详细讲解: 复制代码代码 /*! * jQuery源码分析-each函数 * jQuery版本:1.4.2 * * ---------------------------------------------------------- * 函数介绍 * * each函数通过jQuery.extend函数附加到jQuery对象中: * jQuery.

读zepto源码之工具函数

读zepto源码之工具函数 Zepto 提供了丰富的工具函数,下面来一一解读. 源码版本 本文阅读的源码为 zepto1.2.0 $.extend $.extend 方法可以用来扩展目标对象的属性.目标对象的同名属性会被源对象的属性覆盖. $.extend 其实调用的是内部方法 extend, 所以我们先看看内部方法 extend 的具体实现. function extend(target, source, deep) { for (key in source) // 遍历源对象的属性值 if

webpack源码-依赖收集

webpack源码-依赖收集 version:3.12.0 程序主要流程: 触发make钩子 Compilation.js 执行EntryOptionPlugin 中注册的make钩子 执行compilation.addEntry 执行compilation._addModuleChain Compilation.js 执行moduleFactory.create(this.semaphore.avaiable 初始化为100) Compilation.js 执行this.buildModule

.1-浅析webpack源码之webpack.cmd

此系列随时可能断更,毕竟我是解释型源码分析-- 尝试看过Spring的源码,有点烧脑,所以还是重回JS吧! 在配置完环境变量后,可以通过webpack指令进行打包,需要知道的是,如果当前路径存在webpack.config.js文件,会被默认指定为配置JS文件 官网原文如下:If a webpack.config.js is present, the webpack command picks it up by default 也就是说直接执行webpack指令会默认执行webpack webp

浅析Scanf源码

记得当初从C语言学习开始就使用scanf,关于scanf的用法也略知一二,对使用scanf出现的问题并未进行深刻探究,故笔者打算对scanf实现进行探究. 如何找到scanf源码 关于VC中的CRT代码在 VS目录下的\VC\crt\src中,我们就先把scanf.c扒出来. int __cdecl scanf ( const char *format, ... ) { va_list arglist; va_start(arglist, format); return vscanf_fn(_i

.22-浅析webpack源码之compile流程-事件流compilation总览

呃,终于到了这地方-- newCompilation(params) { // ... this.applyPlugins("this-compilation", compilation, params); // 31 console.log(this._plugins['compilation'].length); this.applyPlugins("compilation", compilation, params); return compilation;