国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

淺析webpack源碼之前言（一）

suosuopuo / 1570人閱讀

為什么讀webpack源碼

因為前端框架離不開webpack，天天都在用的東西啊，怎能不研究

讀源碼能學(xué)到很多做項目看書學(xué)不到的東西，比如說架構(gòu)，構(gòu)造函數(shù)，es6很邊緣的用法，甚至給函數(shù)命名也會潛移默化的影響等

想寫源碼，不看源碼怎么行，雖然現(xiàn)在還不知道寫什么，就算不寫什么，看看別人寫的總可以吧

知道世界的廣闊，那么多插件，那么多軟件開發(fā)師，他們在做什么，同樣是寫js的，怎么他們能這么偉大

好奇心

本以為用框架以及用熟練后，到達(dá)了一個美麗的小湖泊，讀源碼發(fā)現(xiàn)原來還有一望無際的海洋，壯麗的雪山，浩淼的星辰。

讀webpack對面試也沒什么用（刷leetcode，面試題更有用），你說你看webpack學(xué)會了啥，一時半會也說不清楚，但就是想看，想就去做，只要不危害他人

為什么寫webpack源碼系列文章博客

我可以只讀不寫的，這樣還讀的更快，只是后面想起了，不知道讀了啥，讀vue的時候好多都沒有記錄，但是即便那樣當(dāng)我再次看到那個函數(shù)我知道那是做什么

給公司寫的項目代碼，如果項目被砍，感覺白寫了一樣

為了證明自己的存在，證明自己來過

如果通過看這個文章你能能學(xué)到絲毫的知識，是我之幸??

看這個你能學(xué)到什么

如果你想知道webpack的算法實現(xiàn)

我建議你看這個git地址

雖然寫的不夠好，但是已經(jīng)是我能找到的中寫的最好的


里面更多記錄了怎么跟蹤的過程

你能學(xué)到如何調(diào)試以及閱讀源碼

知道webpack頁面架構(gòu)

webpack哪些模塊實現(xiàn)了什么功能

如何讀webpack 準(zhǔn)備

自己用webpack搭建一個項目,甚至是現(xiàn)成的讀webpack都可以

當(dāng)你npm run build 發(fā)生了什么？


參考npm的run-script文檔

npm run會自動添加node_module/.bin 到當(dāng)前命令所用的PATH變量中，
因此，npm run build 會執(zhí)行package.json配置的build，目前我配置的是webpack，
實際會調(diào)用 node_modules/.bin/webpack

打開項目找到node_modules/.bin/webpack，需要點耐心，需要翻很多
webpack是一個符號連接
指到了webpack/bin/webpack.js

log大法

第一行是

#!/usr/bin/env node

它被稱為 Shebang。

/usr/bin/env 不是一個路徑，而是一個命令，
后面跟node 參數(shù)，就會找到node并調(diào)用它。

$ /usr/bin/env node --version
v10.11.0

log 調(diào)試

顏色log DEGUB

用這個打印log會區(qū)分顏色，事實上我用著，也沒那么好用

順便講一下吧

安裝

npm i -D debug

在要調(diào)試的文件中
定義

const log = require("debug")("debug-webpack webpack webpack.js");
log("你想打印的")

請把react-beauty-highcharts替換成你的文件名，這樣才會有l(wèi)og

DEBUG=react-beauty-highcharts* npm run build

這個有個缺點就是如果json比較大，每一行都會打印一遍debug-webpack webpack webpack.js名字，不好復(fù)制,還是console.log() 好使

我們打開文件，里面主要處理了一些安裝的邏輯
沒安裝包報錯之類的
找到

const cliPath = path.resolve(path.dirname(pkgPath), pkg.bin[installedClis[0].binName]);
// 引入了路徑看到打印了路徑是node_modules/webpack-cli/bin/cli.js
require(cliPath);

接下來打開webpack-cli/bin/cli.js

241行

let options;
try {
    options = require("./convert-argv")(argv);
} catch (err) {
    
}

我們分析convert-argv模塊
想有更好的視覺效果
傳送門vuepress 效果查看

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/101202.html

相關(guān)文章

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

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

    doodlewind 評論0 收藏0

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

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

    lemon 評論0 收藏0

  • 淺析webpack源碼之WebpackOptionsApply 模塊(七)

    摘要：還做了處理，是之所以能根據(jù)變化自己更新的核心，好凌亂，我們先從那個坑跳出來進(jìn)入這個大坑進(jìn)入這個頁面看到前面一大堆的模塊引入，已經(jīng)給跪了，但是馬馬虎虎的完成也比放棄好前面一大堆的引入，主要是下和文件夾下的模塊父類就只是定義了接口主要核心在方法 NodeEnvironmentPlugin還做了watch處理，NodeWatchFileSystem是webpack之所以能根據(jù)變化自己更新的核...

    AaronYuan 評論0 收藏0

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

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

    PumpkinDylan 評論0 收藏0

  • 淺析webpack源碼之NodeEnvironmentPlugin模塊總覽（六）

    摘要：進(jìn)入傳入地址出來一個復(fù)雜對象把掛載到對象上太復(fù)雜我們先看可以緩存輸入的文件系統(tǒng)輸入文件系統(tǒng)輸出文件系統(tǒng)，掛載到對象傳入輸入文件，監(jiān)視文件系統(tǒng)，掛載到對象添加事件流打開插件讀取目錄下文件對文件名進(jìn)行格式化異步讀取目錄下文件同步方法就 進(jìn)入webpack.js //傳入地址,new Compiler出來一個復(fù)雜對象 compiler = new Compiler(options.conte...

    ChristmasBoy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<