資訊專欄INFORMATION COLUMN
摘要：我們看到引入了對進(jìn)行分析是一個(gè)很大的文件，里面規(guī)定了我們隨便看一段這是對你輸入的規(guī)定的要求是是其實(shí)就是本下的這樣寫可以提取公用的配置，避免代碼冗余一共行，其中就占了行接下里進(jìn)入函數(shù)引入引入了，我們在搜索鏈接我們看到，在文檔里這樣的描述的用法
我們看到引入了
對webpack.js
const validateSchema = require("./validateSchema");
const webpackOptionsSchema = require("../schemas/WebpackOptions.json");
const webpackOptionsValidationErrors = validateSchema(
webpackOptionsSchema,
options
);
進(jìn)行分析
webpackOptionsSchema是一個(gè)很大的json文件，里面規(guī)定了
我們隨便看一段
{
"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的規(guī)定
loader的type要求是object
$ref是 #/definitions/Externals其實(shí)就是本json下的definitions/Externals
這樣寫可以提取公用的配置，避免代碼冗余
一共2100行，其中definitions就占了1800行
接下里進(jìn)入validateSchema.js函數(shù)
//引入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);
這個(gè)邏輯比較簡單
new一個(gè) ajv，調(diào)用方法 ajv.compile(schema)，schema就是你規(guī)定的對象
validate是返回的一個(gè)函數(shù)
把要驗(yàn)證的數(shù)據(jù)傳入?yún)?shù)，如果有錯(cuò)誤會(huì)記在valid里
const validateObject = (schema, options) => {
const validate = ajv.compile(schema);
const valid = validate(options);
return valid ? [] : filterErrors(validate.errors);
};
很顯然，webpack也是這樣使用的，如果有錯(cuò)誤，調(diào)用filterErrors，又對錯(cuò)誤進(jìn)行了一層包裝
validate函數(shù)實(shí)在是太長了就不貼了，對ajv有興趣的可以研究研究，輸入什么，輸出的錯(cuò)誤會(huì)又怎樣的格式輸出等
這個(gè)不影響主線，我們接著往下讀
// 如果有錯(cuò)誤就交給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);`
我們走單配置即傳值為對象的時(shí)候，
傳進(jìn)去一個(gè)options 輸入一個(gè)options
很明顯是是給options添加默認(rèn)配置
就是給options多掛在幾個(gè)默認(rèn)屬性，至于怎么添加的，添加了什么，不是重點(diǎn)，感興趣的可以讀讀WebpackOptionsDefaulter函數(shù)
大部分的復(fù)雜架構(gòu)，無論是vue和react,都會(huì)對你傳入的對象作出相應(yīng)的默認(rèn)處理，接著往下
// 調(diào)用Compile，傳入當(dāng)前文件路徑
compiler = new Compiler(options.context);
// compiler對象上掛載屬性options
compiler.options = options;
// compiler對象上掛載屬性options
//給compiler加載node環(huán)境
new NodeEnvironmentPlugin().apply(compiler);
//options.plugins存在且為數(shù)組
if (options.plugins && Array.isArray(options.plugins)) {
for (const plugin of options.plugins) {
if (typeof plugin === "function") {
plugin.call(compiler, compiler);
} else {
//plugin是對象怎么會(huì)有改變this的apply方法？后續(xù)代查
plugin.apply(compiler);
}
}
}
compiler.hooks.environment.call();
compiler.hooks.afterEnvironment.call();
compiler.options = new WebpackOptionsApply().process(options, compiler);
接下來，我們看Compiler模塊
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101090.html
摘要：我們打開根據(jù)上次所返回的這個(gè)因?yàn)橛辛松洗蔚幕A(chǔ)，比較容易讀了大體邏輯是這樣的先定義一個(gè)空對象同上次的一個(gè)邏輯，還是一個(gè)目前的方式只有一個(gè)滿足如果滿足的會(huì)執(zhí)行一系列函數(shù)這個(gè)函數(shù)直接結(jié)果是的影響是打比如如果滿足的話當(dāng)你的時(shí)候就會(huì)在頁面上出 我們打開bin/cli.js根據(jù)上次所返回的Options processOptions(options)這個(gè)因?yàn)橛辛松洗蔚幕A(chǔ)，比較容易讀了,大體邏輯...
為什么讀webpack源碼 因?yàn)榍岸丝蚣茈x不開webpack，天天都在用的東西啊，怎能不研究 讀源碼能學(xué)到很多做項(xiàng)目看書學(xué)不到的東西，比如說架構(gòu)，構(gòu)造函數(shù)，es6很邊緣的用法，甚至給函數(shù)命名也會(huì)潛移默化的影響等 想寫源碼，不看源碼怎么行，雖然現(xiàn)在還不知道寫什么，就算不寫什么，看看別人寫的總可以吧 知道世界的廣闊，那么多插件，那么多軟件開發(fā)師，他們在做什么，同樣是寫js的，怎么他們能這么偉大 好奇...
摘要：先看下官方文檔中對模塊的描述在模塊化編程中，開發(fā)者將程序分解成離散功能塊，并稱之為模塊。每個(gè)模塊具有比完整程序更小的接觸面，使得校驗(yàn)調(diào)試測試輕而易舉。 先看下webpack官方文檔中對模塊的描述： 在模塊化編程中，開發(fā)者將程序分解成離散功能塊(discrete chunks of functionality)，并稱之為模塊。每個(gè)模塊具有比完整程序更小的接觸面，使得校驗(yàn)、調(diào)試、測試輕而易...
摘要：小尾巴最終返回了屬性掛載把引入的函數(shù)模塊全部暴露出來下面暴露了一些插件再通俗一點(diǎn)的解釋比如當(dāng)你你能調(diào)用文件下的方法這個(gè)和上面的不同在于上面的是掛在函數(shù)對象上的正題要想理解必須要理解再寫一遍地址我們先簡單的理解它為一個(gè)通過注冊插件是插件的事 webpack.js小尾巴 const webpack = (options, callback) => { //... if (...
摘要：源碼分析四模塊上一篇我們看到，通過對命令行傳入的參數(shù)和配置文件里的配置項(xiàng)做了轉(zhuǎn)換包裝，然后傳遞給的模塊去編譯。這一篇我們來看看做了些什么事。在上面的分析中，我們看到最核心的其實(shí)就是實(shí)例，接下來我們就看下它的類的內(nèi)部邏輯。 webpack 源碼分析（四）——complier模塊 上一篇我們看到，webpack-cli 通過 `yargs 對命令行傳入的參數(shù)和配置文件里的配置項(xiàng)做了轉(zhuǎn)換包裝...
閱讀 3429·2021-11-15 11:39
閱讀 1573·2021-09-22 10:02
閱讀 1319·2021-08-27 16:24
閱讀 3606·2019-08-30 15:52
閱讀 3418·2019-08-29 16:20
閱讀 832·2019-08-28 18:12
閱讀 559·2019-08-26 18:27
閱讀 726·2019-08-26 13:32
