浅析webpack源码之processOptions处理Options以及入口函数(三)

咱们打开bin/cli.js
根据上次所返回的Optionswebpack

processOptions(options)
这个由于有了上次的基础,比较容易读了,大致逻辑是这样的web

  • 先定义一个 outputOptions 空对象

同上次的ifArg一个逻辑,argv仍是一个npm

function ifArg(name, fn, init) {
    if (Array.isArray(argv[name])) {
        if (init) init();
        argv[name].forEach(fn);
    } else if (typeof argv[name] !== "undefined") {
        if (init) init();
        fn(argv[name], -1);
    }
}

目前的方式只有一个知足
info-verbosity
若是知足的会执行fn, init一系列函数函数

ifArg("info-verbosity", function(value) {
    outputOptions.infoVerbosity = value;
});

这个函数直接结果是工具

outputOptions.infoVerbosity = 'info';

outputOptions.infoVerbosity的影响是打logui

好比若是 watch知足的话插件

if (outputOptions.infoVerbosity !== "none"){
    console.log("\nwebpack is watching the files…\n");
}

当你npm run dev的时候就会在页面上出现code

webpack is watching the files…对象

这样一句话了进程

其余逻辑类此,经过调用ifArg 对outputOptions对象添加数据,而后根据属性的值来打不一样的log
这就是processOptions的函数所作的事情

这些都不影响主进程

最重要的是里面这一句
const webpack = require("webpack");
let compiler;
compiler = webpack(options);
// ... 
compiler.run(compilerCallback);

拉开了webpack的序幕

那么问题来了webpack从那里引进来的

なに(纳尼) 通过一番搜索
在webpack/lib/webpack.js

先不纠结为何找到了lib下

咱们继续读

打开webpack.js

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( /*...*/ );

能够主要分为如下几块:

一、工具模块引入

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

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

四、执行回调函数

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

六、输出一些插件

相关文章
相关标签/搜索