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

doodlewind 發布于2019-08-23 14:45 / 1352人閱讀

摘要：我們打開根據上次所返回的這個因為有了上次的基礎，比較容易讀了大體邏輯是這樣的先定義一個空對象同上次的一個邏輯，還是一個目前的方式只有一個滿足如果滿足的會執行一系列函數這個函數直接結果是的影響是打比如如果滿足的話當你的時候就會在頁面上出

我們打開bin/cli.js
根據上次所返回的Options

processOptions(options)
這個因為有了上次的基礎，比較容易讀了,大體邏輯是這樣的

先定義一個 outputOptions 空對象

同上次的ifArg一個邏輯，argv還是一個

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的影響是打log

比如如果 watch滿足的話

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

當你npm run dev的時候就會在頁面上出現

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

可以主要分為以下幾塊：

1、工具模塊引入

2、對配置對象進行錯誤檢測

3、分多配置或單配置進行處理

4、執行回調函數

5、在webpack函數上掛載引入的模塊

6、輸出一些插件

云服務器 GPU云服務器源碼淺析 python入口函數源碼中文說明之 webrtc 源碼分析入口

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101091.html

webpack源碼之運行流程

摘要：引言通過前面幾張的鋪墊下面開始分析源碼核心流程大體上可以分為初始化編譯輸出三個階段下面開始分析初始化這個階段整體流程做了什么啟動構建，讀取與合并配置參數，加載，實例化。推薦源碼之源碼之機制源碼之簡介源碼之機制參考源碼引言通過前面幾張的鋪墊,下面開始分析webpack源碼核心流程,大體上可以分為初始化,編譯,輸出三個階段,下面開始分析初始化這個階段整體流程做了什么? 啟動構建，讀...

kviccn 2019-08-22 16:04 評論0 收藏0
淺析webpack源碼之入口函數webpack.js詳解（四）

摘要：我們看到引入了對進行分析是一個很大的文件，里面規定了我們隨便看一段這是對你輸入的規定的要求是是其實就是本下的這樣寫可以提取公用的配置，避免代碼冗余一共行，其中就占了行接下里進入函數引入引入了，我們在搜索鏈接我們看到，在文檔里這樣的描述的用法我們看到引入了對webpack.js const validateSchema = require(./validateSchema); con...

zone 2019-08-23 14:45 評論0 收藏0
淺析webpack源碼之convert-argv模塊（二）

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

lemon 2019-08-23 14:38 評論0 收藏0
淺析webpack源碼之前言（一）

為什么讀webpack源碼因為前端框架離不開webpack，天天都在用的東西啊，怎能不研究讀源碼能學到很多做項目看書學不到的東西，比如說架構，構造函數，es6很邊緣的用法，甚至給函數命名也會潛移默化的影響等想寫源碼，不看源碼怎么行，雖然現在還不知道寫什么，就算不寫什么，看看別人寫的總可以吧知道世界的廣闊，那么多插件，那么多軟件開發師，他們在做什么，同樣是寫js的，怎么他們能這么偉大好奇...

suosuopuo 2019-08-23 14:49 評論0 收藏0
淺析webpack源碼之Compiler.js模塊(八)

摘要：小尾巴最終返回了屬性掛載把引入的函數模塊全部暴露出來下面暴露了一些插件再通俗一點的解釋比如當你你能調用文件下的方法這個和上面的不同在于上面的是掛在函數對象上的正題要想理解必須要理解再寫一遍地址我們先簡單的理解它為一個通過注冊插件是插件的事 webpack.js小尾巴 const webpack = (options, callback) => { //... if (...

PumpkinDylan 2019-08-23 14:50 評論0 收藏0