webpack源碼之調試篇

前言

學習一個工具或者庫的源碼以前，得對一個庫進行大概的認識，好比源碼的目錄結構，如何調試等。屬於前置的準備階段。

而webpack是我即vue以後，但願通讀的一個工具庫。其實在團隊中，本身須要去完成一些技術指標，而相應的技術儲備是必不可少的。而就前端工程化領域而言，webpack是避不開的一條路。

因此在讀源碼的同時，但願能收穫更廣闊的技術視野，以及以後用到這個東西的時候，知道其原理。

整體大綱

總歷時兩個月：每篇文章，將會在最終稿整理完成以後，陸續發送。

本系列基於webpack-4分支，版本4.43.0進行閱讀。

• webpack源碼之調試篇（完成時間：2020/05/15）
• webpock源碼之webpack-cli入口分析篇（完成時間：2020/06/13）
• webpack源碼之主流程篇（完成時間：待定）
• webpack源碼之細聊tapable原理【上】（完成時間：2020/06/06）
• webpack源碼之細聊tapable原理【下】（完成時間：待定）

爲何選擇webpack4閱讀

一、在閱讀的過程當中，webpack5其實剛出來沒多久，對於一些新特性，項目中也會不多用到。咱們能夠了解完4的東西以後，再去對比了解5的特性。更加有助於咱們掌握。

二、對於閱讀源碼，借鑑資料是必不可少的，網上不少4版本的資料，相對於5來講，若是版本不一致，容易走彎路。

拉取代碼

// 拉取webpack倉庫
git clone https://github.com/webpack/webpack.git
// 切分支
git checkout webpack-4
複製代碼

如何調試

對於一個龐大的開源工程，逐一看代碼是不現實的，咱們須要清楚的無非是主流程，以及這個流程完成以後，輸出的一些變量值來判斷這個流程是幹什麼的。這種無可避免的須要用到調試工具。

vscode調試

隨着vscode逐漸完善debugger模塊，目前用vscode來調試node程序已是一件比較輕鬆的事。

• 簡單例子的調試

新建一個index.js文件。而後在裏面寫一些簡單的邏輯。

index例子

const mergeCache = new WeakMap();
const cachedMerge = (first, second) => {  debugger;  let innerCache = mergeCache.get(first);  if (innerCache === undefined) {  innerCache = new WeakMap();  mergeCache.set(first, innerCache);  }  const prevMerge = innerCache.get(second);  if (prevMerge !== undefined) return prevMerge;  const newMerge = Object.assign({}, first, second);  innerCache.set(second, newMerge);  return newMerge; }; cachedMerge(); 複製代碼

在.vscode文件夾中，建立launch.json

{
 "version": "0.2.0",  "configurations": [  {  "type": "node",  "request": "launch",  "name": "Launch Program",  "skipFiles": [  "<node_internals>/**"  ],  "program": "${workspaceFolder}/index.js"  }  ] } 複製代碼

而後切到調試欄，開啓調試

調試例圖：

• 調試webpack

在package.json中的scripts標籤中寫入debug指令:

"debug": "node --inspect=5858 ./node_modules/webpack/bin/webpack.js --config webpack.pro.js"
複製代碼

例圖：

修改launch.json文件

{
 "version": "0.2.0",  "configurations": [  {  "type": "node",  "request": "launch",  "name": "debug",  "runtimeExecutable": "npm",  "runtimeArgs": ["run", "debug"],  "port": 5858  }  ] } 複製代碼

這裏有幾個重要的概念：

runtimeExecutable：程序的執行器，默認是node，咱們將其改爲npm

runtimeArgs：傳入執行器的參數。也就是run和debug

port：監聽的端口號。由於debug指令中起的端口是5858，因此監聽端口5858。

在bin/webpack.js文件中打入debugger斷點。

啓動調試按鈕

進入調試界面：

用chrome devtool進行調試

咱們也能夠用chrome來調試代碼。

• 簡單的調試例子

仍是延續上面那個index.js例子。

node --inspect index.js
複製代碼

而後打開，chrome://inspect。

點擊Open dedicated DevTools for Node

調試界面

• 調試webpack

書寫debug指令

在package.json中的scripts標籤中寫入debug指令:

"debug": "node --inspect-brk ./node_modules/webpack/bin/webpack.js --config webpack.pro.js"
複製代碼

例圖：

–inspect-brk這個參數是會將斷點自動斷到第一行。以後只需debugger指令調試便可。

總結

關於調試：調試技巧在日常的工做中也是能夠用到的，因爲前端會偏向於交互的特性，因此console.log這些我會很經常使用，可是向debug這些，當接觸node以後，會發現比console.log實用太多了。因此，這邊文章中的調試方式，可適用於大部分場景。

關於webpack：這是第一篇準備篇，但願是好的開始。但願本身能產出高質量的東西。

關於公衆號：筆者也要開始維護本身的公衆號啦，東西分爲原創和轉載兩部分，由於筆者工做忙的緣由，原創儘可能保證兩個星期一篇，以源碼討論爲主。也但願本身能把晦澀難懂的東西，寫的淺顯易懂。