資訊專欄INFORMATION COLUMN
摘要：我們打開根據(jù)上次所返回的這個(gè)因?yàn)橛辛松洗蔚幕A(chǔ)，比較容易讀了大體邏輯是這樣的先定義一個(gè)空對(duì)象同上次的一個(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ǔ)，比較容易讀了,大體邏輯是這樣的
先定義一個(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è)滿足
info-verbosity
如果滿足的會(huì)執(zhí)行fn, init一系列函數(shù)
ifArg("info-verbosity", function(value) {
outputOptions.infoVerbosity = value;
});
這個(gè)函數(shù)直接結(jié)果是
outputOptions.infoVerbosity = "info";
outputOptions.infoVerbosity的影響是打log
比如如果 watch滿足的話
if (outputOptions.infoVerbosity !== "none"){
console.log("
webpack is watching the files…
");
}
當(dāng)你npm run dev的時(shí)候就會(huì)在頁面上出現(xiàn)
webpack is watching the files…
這樣一句話了
其他邏輯類此，通過調(diào)用ifArg 對(duì)outputOptions對(duì)象添加數(shù)據(jù)，然后根據(jù)屬性的值來打不同的log
這就是processOptions的函數(shù)所做的事情
這些都不影響主進(jìn)程
const webpack = require("webpack");
let compiler;
compiler = webpack(options);
// ...
compiler.run(compilerCallback);
拉開了webpack的序幕
なに（納尼） 經(jīng)過一番搜索
在webpack/lib/webpack.js
先不糾結(jié)為什么找到了lib下
我們繼續(xù)讀
打開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;
// ...屬性掛載
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://m.hztianpu.com/yun/101091.html
摘要：引言通過前面幾張的鋪墊下面開始分析源碼核心流程大體上可以分為初始化編譯輸出三個(gè)階段下面開始分析初始化這個(gè)階段整體流程做了什么啟動(dòng)構(gòu)建，讀取與合并配置參數(shù)，加載，實(shí)例化。推薦源碼之源碼之機(jī)制源碼之簡(jiǎn)介源碼之機(jī)制參考源碼 引言 通過前面幾張的鋪墊,下面開始分析webpack源碼核心流程,大體上可以分為初始化,編譯,輸出三個(gè)階段,下面開始分析 初始化 這個(gè)階段整體流程做了什么? 啟動(dòng)構(gòu)建，讀...
摘要：我們看到引入了對(duì)進(jìn)行分析是一個(gè)很大的文件，里面規(guī)定了我們隨便看一段這是對(duì)你輸入的規(guī)定的要求是是其實(shí)就是本下的這樣寫可以提取公用的配置，避免代碼冗余一共行，其中就占了行接下里進(jìn)入函數(shù)引入引入了，我們?cè)谒阉麈溄游覀兛吹?，在文檔里這樣的描述的用法 我們看到引入了 對(duì)webpack.js const validateSchema = require(./validateSchema); con...
摘要：接下來我看看一下函數(shù)我們先按照分支走為讀取是里的對(duì)象，饒了這大的一個(gè)圈子，那么接下來一起來看一看對(duì)你的輸入配置做了怎么樣的處理吧 打開webpeck-cli下的convert-argv.js文件 // 定義options為空數(shù)組 const options = []; // webpack -d 檢查 -d指令 if (argv.d) { //... } ...
為什么讀webpack源碼 因?yàn)榍岸丝蚣茈x不開webpack，天天都在用的東西啊，怎能不研究 讀源碼能學(xué)到很多做項(xiàng)目看書學(xué)不到的東西，比如說架構(gòu)，構(gòu)造函數(shù)，es6很邊緣的用法，甚至給函數(shù)命名也會(huì)潛移默化的影響等 想寫源碼，不看源碼怎么行，雖然現(xiàn)在還不知道寫什么，就算不寫什么，看看別人寫的總可以吧 知道世界的廣闊，那么多插件，那么多軟件開發(fā)師，他們?cè)谧鍪裁?，同樣是寫js的，怎么他們能這么偉大 好奇...
摘要：小尾巴最終返回了屬性掛載把引入的函數(shù)模塊全部暴露出來下面暴露了一些插件再通俗一點(diǎn)的解釋比如當(dāng)你你能調(diào)用文件下的方法這個(gè)和上面的不同在于上面的是掛在函數(shù)對(duì)象上的正題要想理解必須要理解再寫一遍地址我們先簡(jiǎn)單的理解它為一個(gè)通過注冊(cè)插件是插件的事 webpack.js小尾巴 const webpack = (options, callback) => { //... if (...
閱讀 1374·2021-11-16 11:45
閱讀 2316·2021-11-02 14:40
閱讀 3969·2021-09-24 10:25
閱讀 3080·2019-08-30 12:45
閱讀 1362·2019-08-29 18:39
閱讀 2533·2019-08-29 12:32
閱讀 1741·2019-08-26 10:45
閱讀 1981·2019-08-23 17:01
