webpack 編譯過程 {ignore}

• webpack 編譯過程 {ignore}
  • 初始化
  • 編譯
  • 輸出
  • 總過程

webpack 的作用是將原始碼編譯（構建、打包）成最終程式碼

整個過程大致分為三個步驟

1. 初始化
2. 編譯
3. 輸出

初始化

此階段，webpack會將CLI引數、配置檔案、預設配置進行融合，形成一個最終的配置物件。

對配置的處理過程是依託一個第三方庫yargs完成的

此階段相對比較簡單，主要是為接下來的編譯階段做必要的準備

目前，可以簡單的理解為，初始化階段主要用於產生一個最終的配置

編譯

1. 建立chunk

chunk是webpack在內部構建過程中的一個概念，譯為塊，它表示通過某個入口找到的所有依賴的統稱。

根據入口模組（預設為./src/index.js）建立一個chunk

每個chunk都有至少兩個屬性：

• name：預設為main
• id：唯一編號，開發環境和name相同，生產環境是一個數字，從0開始

2. 構建所有依賴模組

AST線上測試工具：https://astexplorer.net/

簡圖

3. 產生chunk assets

在第二步完成後，chunk中會產生一個模組列表，列表中包含了模組id和模組轉換後的程式碼

接下來，webpack會根據配置為chunk生成一個資源列表，即chunk assets，資源列表可以理解為是生成到最終檔案的檔名和檔案內容

chunk hash是根據所有chunk assets的內容生成的一個hash字串
hash：一種演算法，具體有很多分類，特點是將一個任意長度的字串轉換為一個固定長度的字串，而且可以保證原始內容不變，產生的hash字串就不變

簡圖

4. 合併chunk assets

將多個chunk的assets合併到一起，併產生一個總的hash

輸出

此步驟非常簡單，webpack將利用node中的fs模組（檔案處理模組），根據編譯產生的總的assets，生成相應的檔案。

總過程

涉及術語

1. module：模組，分割的程式碼單元，webpack中的模組可以是任何內容的檔案，不僅限於JS
2. chunk：webpack內部構建模組的塊，一個chunk中包含多個模組，這些模組是從入口模組通過依賴分析得來的
3. bundle：chunk構建好模組後會生成chunk的資源清單，清單中的每一項就是一個bundle，可以認為bundle就是最終生成的檔案
4. hash：最終的資源清單所有內容聯合生成的hash值
5. chunkhash：chunk生成的資源清單內容聯合生成的hash值
6. chunkname：chunk的名稱，如果沒有配置則使用main
7. id：通常指chunk的唯一編號，如果在開發環境下構建，和chunkname相同；如果是生產環境下構建，則使用一個從0開始的數字進行編號