淺析webpack源碼之入口函數webpack.js詳解（四）

zone 發布于2019-08-23 14:45 / 1357人閱讀

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

我們看到引入了

對webpack.js

const validateSchema = require("./validateSchema");
const webpackOptionsSchema = require("../schemas/WebpackOptions.json");
const webpackOptionsValidationErrors = validateSchema(
    webpackOptionsSchema,
    options
);

進行分析

webpackOptionsSchema是一個很大的json文件，里面規定了

我們隨便看一段

{
"entry": {
      "description": "The entry point(s) of the compilation.",
      "anyOf": [
        {
          "$ref": "#/definitions/Entry"
        }
      ]
    },
    "externals": {
      "description": "Specify dependencies that shouldn"t be resolved by webpack, but should become dependencies of the resulting bundle. The kind of the dependency depends on `output.libraryTarget`.",
      "anyOf": [
        {
          "$ref": "#/definitions/Externals"
        }
      ]
    },
    "loader": {
      "description": "Custom values available in the loader context.",
      "type": "object"
    }
}

這是對你輸入options的規定

loader的type要求是object

$ref是 #/definitions/Externals其實就是本json下的definitions/Externals

這樣寫可以提取公用的配置，避免代碼冗余

一共2100行，其中definitions就占了1800行

接下里進入validateSchema.js函數

//引入ajv
const Ajv = require("ajv");
const ajv = new Ajv({
    errorDataPath: "configuration",
    allErrors: true,
    verbose: true
});

引入了ajv，我們在gihub搜索ajv 鏈接

我們看到，在文檔里這樣的描述的用法

var Ajv = require("ajv");
var ajv = new Ajv(); // options can be passed, e.g. {allErrors: true}
var validate = ajv.compile(schema);
var valid = validate(data);
if (!valid) console.log(validate.errors);

這個邏輯比較簡單

new一個 ajv，調用方法 ajv.compile(schema)，schema就是你規定的對象

validate是返回的一個函數

把要驗證的數據傳入參數，如果有錯誤會記在valid里

const validateObject = (schema, options) => {
    const validate = ajv.compile(schema);
    const valid = validate(options);
    return valid ? [] : filterErrors(validate.errors);
};

很顯然，webpack也是這樣使用的，如果有錯誤，調用filterErrors，又對錯誤進行了一層包裝

validate函數實在是太長了就不貼了，對ajv有興趣的可以研究研究，輸入什么，輸出的錯誤會又怎樣的格式輸出等

這個不影響主線，我們接著往下讀

// 如果有錯誤就交給WebpackOptionsValidationError對象處理
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") {
    options = new WebpackOptionsDefaulter().process(options);

    compiler = new Compiler(options.context);
    compiler.options = options;
    new NodeEnvironmentPlugin().apply(compiler);
    if (options.plugins && Array.isArray(options.plugins)) {
        for (const plugin of options.plugins) {
            if (typeof plugin === "function") {
                plugin.call(compiler, compiler);
            } else {
                plugin.apply(compiler);
            }
        }
    }
    compiler.hooks.environment.call();
    compiler.hooks.afterEnvironment.call();
    compiler.options = new WebpackOptionsApply().process(options, compiler);
} else {
    throw new Error("Invalid argument: options");
}

options = new WebpackOptionsDefaulter().process(options);`

我們走單配置即傳值為對象的時候，
傳進去一個options 輸入一個options
很明顯是是給options添加默認配置
就是給options多掛在幾個默認屬性，至于怎么添加的，添加了什么，不是重點，感興趣的可以讀讀WebpackOptionsDefaulter函數

大部分的復雜架構，無論是vue和react,都會對你傳入的對象作出相應的默認處理，接著往下

        // 調用Compile，傳入當前文件路徑
        compiler = new Compiler(options.context);
        // compiler對象上掛載屬性options
        compiler.options = options;
        // compiler對象上掛載屬性options
        //給compiler加載node環境
        new NodeEnvironmentPlugin().apply(compiler);
        //options.plugins存在且為數組
        if (options.plugins && Array.isArray(options.plugins)) {
            for (const plugin of options.plugins) {
                if (typeof plugin === "function") {
                    plugin.call(compiler, compiler);
                } else {
                 //plugin是對象怎么會有改變this的apply方法？后續代查
                    plugin.apply(compiler);
                }
            }
        }
        compiler.hooks.environment.call();
        compiler.hooks.afterEnvironment.call();
        compiler.options = new WebpackOptionsApply().process(options, compiler);

接下來，我們看Compiler模塊

GPU云服務器云服務器源碼淺析 python入口函數源碼中文說明之時間函數詳解

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

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

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

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

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

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

suosuopuo 2019-08-23 14:49 評論0 收藏0
webpack4.x 模塊化淺析-CommonJS

摘要：先看下官方文檔中對模塊的描述在模塊化編程中，開發者將程序分解成離散功能塊，并稱之為模塊。每個模塊具有比完整程序更小的接觸面，使得校驗調試測試輕而易舉。先看下webpack官方文檔中對模塊的描述：在模塊化編程中，開發者將程序分解成離散功能塊(discrete chunks of functionality)，并稱之為模塊。每個模塊具有比完整程序更小的接觸面，使得校驗、調試、測試輕而易...

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

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

PumpkinDylan 2019-08-23 14:50 評論0 收藏0
webpack 源碼分析（四）——complier模塊

摘要：源碼分析四模塊上一篇我們看到，通過對命令行傳入的參數和配置文件里的配置項做了轉換包裝，然后傳遞給的模塊去編譯。這一篇我們來看看做了些什么事。在上面的分析中，我們看到最核心的其實就是實例，接下來我們就看下它的類的內部邏輯。 webpack 源碼分析（四）——complier模塊上一篇我們看到，webpack-cli 通過 `yargs 對命令行傳入的參數和配置文件里的配置項做了轉換包裝...

tianlai 2019-08-26 18:42 評論0 收藏0