成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

淺析webpack源碼之processOptions處理Options以及入口函數(shù)（三）

doodlewind / 1369人閱讀

摘要：我們打開(kāi)根據(jù)上次所返回的這個(gè)因?yàn)橛辛松洗蔚幕A(chǔ)，比較容易讀了大體邏輯是這樣的先定義一個(gè)空對(duì)象同上次的一個(gè)邏輯，還是一個(gè)目前的方式只有一個(gè)滿(mǎn)足如果滿(mǎn)足的會(huì)執(zhí)行一系列函數(shù)這個(gè)函數(shù)直接結(jié)果是的影響是打比如如果滿(mǎn)足的話(huà)當(dāng)你的時(shí)候就會(huì)在頁(yè)面上出

我們打開(kāi)bin/cli.js
根據(jù)上次所返回的Options

processOptions(options)
這個(gè)因?yàn)橛辛松洗蔚幕A(chǔ)，比較容易讀了,大體邏輯是這樣的

先定義一個(gè) outputOptions 空對(duì)象

同上次的ifArg一個(gè)邏輯，argv還是一個(gè)

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);
    }
}

目前的方式只有一個(gè)滿(mǎn)足
info-verbosity
如果滿(mǎn)足的會(huì)執(zhí)行fn, init一系列函數(shù)

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

這個(gè)函數(shù)直接結(jié)果是

outputOptions.infoVerbosity = "info";

outputOptions.infoVerbosity的影響是打log

比如如果 watch滿(mǎn)足的話(huà)

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

當(dāng)你npm run dev的時(shí)候就會(huì)在頁(yè)面上出現(xiàn)

webpack is watching the files…

這樣一句話(huà)了

其他邏輯類(lèi)此，通過(guò)調(diào)用ifArg 對(duì)outputOptions對(duì)象添加數(shù)據(jù)，然后根據(jù)屬性的值來(lái)打不同的log
這就是processOptions的函數(shù)所做的事情

這些都不影響主進(jìn)程

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

拉開(kāi)了webpack的序幕

那么問(wèn)題來(lái)了webpack從那里引進(jìn)來(lái)的

なに（納尼） 經(jīng)過(guò)一番搜索
在webpack/lib/webpack.js

先不糾結(jié)為什么找到了lib下

我們繼續(xù)讀

打開(kāi)webpack.js

const Compiler = require("./Compiler");
// ...模塊引入

function webpack(options, callback) {
    // 錯(cuò)誤檢測(cè)
    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;
// ...屬性?huà)燧d

function exportPlugins( /*...*/ )

exportPlugins( /*...*/ );
exportPlugins( /*...*/ );

可以主要分為以下幾塊：

1、工具模塊引入

2、對(duì)配置對(duì)象進(jìn)行錯(cuò)誤檢測(cè)

3、分多配置或單配置進(jìn)行處理

4、執(zhí)行回調(diào)函數(shù)

5、在webpack函數(shù)上掛載引入的模塊

6、輸出一些插件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101091.html

相關(guān)文章

  • webpack源碼之運(yùn)行流程

    摘要：引言通過(guò)前面幾張的鋪墊下面開(kāi)始分析源碼核心流程大體上可以分為初始化編譯輸出三個(gè)階段下面開(kāi)始分析初始化這個(gè)階段整體流程做了什么啟動(dòng)構(gòu)建，讀取與合并配置參數(shù)，加載，實(shí)例化。推薦源碼之源碼之機(jī)制源碼之簡(jiǎn)介源碼之機(jī)制參考源碼 引言 通過(guò)前面幾張的鋪墊,下面開(kāi)始分析webpack源碼核心流程,大體上可以分為初始化,編譯,輸出三個(gè)階段,下面開(kāi)始分析 初始化 這個(gè)階段整體流程做了什么? 啟動(dòng)構(gòu)建，讀...

    kviccn 評(píng)論0 收藏0

  • 淺析webpack源碼之入口函數(shù)webpack.js詳解（四）

    摘要：我們看到引入了對(duì)進(jìn)行分析是一個(gè)很大的文件，里面規(guī)定了我們隨便看一段這是對(duì)你輸入的規(guī)定的要求是是其實(shí)就是本下的這樣寫(xiě)可以提取公用的配置，避免代碼冗余一共行，其中就占了行接下里進(jìn)入函數(shù)引入引入了，我們?cè)谒阉麈溄游覀兛吹剑谖臋n里這樣的描述的用法 我們看到引入了 對(duì)webpack.js const validateSchema = require(./validateSchema); con...

    zone 評(píng)論0 收藏0

  • 淺析webpack源碼之convert-argv模塊（二）

    摘要：接下來(lái)我看看一下函數(shù)我們先按照分支走為讀取是里的對(duì)象，饒了這大的一個(gè)圈子，那么接下來(lái)一起來(lái)看一看對(duì)你的輸入配置做了怎么樣的處理吧 打開(kāi)webpeck-cli下的convert-argv.js文件 // 定義options為空數(shù)組 const options = []; // webpack -d 檢查 -d指令 if (argv.d) { //... } ...

    lemon 評(píng)論0 收藏0

  • 淺析webpack源碼之前言（一）

    為什么讀webpack源碼 因?yàn)榍岸丝蚣茈x不開(kāi)webpack，天天都在用的東西啊，怎能不研究 讀源碼能學(xué)到很多做項(xiàng)目看書(shū)學(xué)不到的東西，比如說(shuō)架構(gòu)，構(gòu)造函數(shù)，es6很邊緣的用法，甚至給函數(shù)命名也會(huì)潛移默化的影響等 想寫(xiě)源碼，不看源碼怎么行，雖然現(xiàn)在還不知道寫(xiě)什么，就算不寫(xiě)什么，看看別人寫(xiě)的總可以吧 知道世界的廣闊，那么多插件，那么多軟件開(kāi)發(fā)師，他們?cè)谧鍪裁?，同樣是?xiě)js的，怎么他們能這么偉大 好奇...

    suosuopuo 評(píng)論0 收藏0

  • 淺析webpack源碼之Compiler.js模塊(八)

    摘要：小尾巴最終返回了屬性?huà)燧d把引入的函數(shù)模塊全部暴露出來(lái)下面暴露了一些插件再通俗一點(diǎn)的解釋比如當(dāng)你你能調(diào)用文件下的方法這個(gè)和上面的不同在于上面的是掛在函數(shù)對(duì)象上的正題要想理解必須要理解再寫(xiě)一遍地址我們先簡(jiǎn)單的理解它為一個(gè)通過(guò)注冊(cè)插件是插件的事 webpack.js小尾巴 const webpack = (options, callback) => { //... if (...

    PumpkinDylan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<