webpack 流程解析（1）：建立compiler之前

csywweb發表於2021-10-07
WebCompile

前言

compiler物件是一個全域性單例，它負責把控整個webpack打包的構建流程。
本文將會介紹在 new compiler 之前，webpack做了什麼

啟動webpack

通常情況下，我們使用如下方式來啟動webpack

// package.json
script: {
   "start": "webpack"
}

webpack/bin

執行 npm run start 之後，會先進入 webpack/bin 下， webpack使用

isInstalled("webpack-cli")

來判斷是否安裝了cli, 沒安裝會使用 yarn 或者 npm 幫你安裝，最後會走到runCli這個方法，核心程式碼就一句

require(path.resolve(path.dirname(pkgPath), pkg.bin[cli.binName]));

這裡去讀取 webpack-cli/bin/cli.js。

webpack-cli/bin

webpack-cli/bin/cli.js 居然還要判斷一下是否安裝了 webpack（上面不是判斷過了）, 如果沒安裝再幫你安裝一下，然後就是例項化一個 webpack-cli 物件，執行例項的run方法。
這裡面程式碼就不細說了，其實就幹了兩件事：

  • 拿到process.args 的引數，校驗
  • 合併引數，針對args的值給webpack的config增加對應的plugin

最後拿到了引數又呼叫了webpack。

這裡用了兩個包來提高執行效率，一個是 import-local,用於優先使用本地檔案，另一個是 v8-compile-cache, 用來做 v8 的編譯快取優化。後續我們再聊這兩個

回到webpack

回到webpack之後呢，就要開始建立 compiler 例項啦，在這之前，其實也會有一點分支邏輯需要處理

  • 如果引數是一個陣列，就建立MultiCompiler例項, 否則就建立一個Compiler的例項。
  • 引數的校驗和複製預設值

一切都走完之後，就要開始建立 compiler 物件了。

結語

在建立 compiler 物件之前 webpack 做的事情並不多。簡單說就一句話，準備好引數。同時也有一些效能優化的手段，這些不在本次系列的討論範圍內，以後有時間再和大家分享

相關文章