什麼是webpack
可以引用官網的一幅圖解釋，我們可以看到webpack，可以分析各個模組的依賴關係，最終打包成我們常見的靜態檔案，.js 、 .css 、 .jpg 、.png。今天我們先不弄那麼複雜，我們就介紹webpack是怎麼分析ES6的模組依賴，怎麼把ES6的程式碼轉成ES5的。
實現
由於ES6轉ES5中需要用到babel，所以要用到一下外掛
npm install @babel/core @babel/parser @babel/traverse @babel/preset-env --save-dev
需要的檔案
使用webpack肯定少不了原檔案，我們會涉及三個需要打包的js檔案（entry.js、message.js、name.js）
// entry.js
import message from './message.js';
console.log(message);
複製程式碼// message.js
import {name} from './name.js';
export default `hello ${name}!`;
複製程式碼// name.js
export const name = 'world';
複製程式碼//bundler.js
// 讀取檔案資訊，並獲得當前js檔案的依賴關係
function createAsset(filename) {//程式碼略}
// 從入口開始分析所有依賴項，形成依賴圖，採用廣度遍歷
function createGraph(entry) {//程式碼略}
// 根據生成的依賴關係圖，生成瀏覽器可執行檔案
function bundle(graph) {//程式碼略}
複製程式碼entry.js 就是我們的入口檔案，檔案的依賴關係是，entry.js依賴message.js，message.js依賴name.js。
bundler.js 是我們簡易版的webpack
目錄結構
- example
- entry.js
- message.js
- name.js
- bundler.js
複製程式碼如何分析依賴
webpack分析依賴是從一個入口檔案開始分析的，當我們把一個入口的檔案路徑傳入，webpack就會通過這個檔案的路徑讀取檔案的資訊（讀取到的本質其實是字串），然後把讀取到的資訊轉成AST（抽象語法樹），簡單點來說呢，就是把一個js檔案裡面的內容存到某種資料結構裡，裡面包括了各種資訊，其中就有當前模組依賴了哪些模組。我們暫時把通過傳檔案路徑能返回檔案資訊的這個函式叫 createAsset 。
createAsset返回什麼
第一步我們肯定需要先從 entry.js 開始分析，於是就有了如下的程式碼，我們先不關心createAsset具體程式碼是怎麼實現的，具體程式碼我會放在最後。
createAsset("./example/entry.js");
複製程式碼當執行這句程式碼，createAsset 會返回下面的資料結構，這裡包括了模組的id，檔案路徑，依賴陣列（entry.js依賴了message.js，所以會返回依賴的檔名），code（這個就是entry.js ES6轉ES5的程式碼）
createAsset 我們成功拿到了entry.js的依賴，就是 dependencies 陣列。
createGraph返回什麼，如何找下一個依賴
我們通過上面可以拿到entry.js依賴的模組，於是我們就可以接著去遍歷dependencies 陣列，迴圈呼叫createAsset這樣就可以得到全部模組相互依賴的資訊。想得到全部依賴資訊需要呼叫 createGraph 這個一個函式，它會進行廣度遍歷，最終返回下面的資料
我們可以看到返回的資料，欄位之前都和大家解釋了，除了 mapping，mapping這個欄位是把當前模組依賴的檔名稱 和 模組的id 做一個對映，目的是為了更方便查詢模組。
bundle返回什麼 && 最後步驟
我們現在已經能拿到每個模組之前的依賴關係，我們再通過呼叫bundle函式，我們就能構造出最後的bundle.js，輸出如下圖
原始碼
最後
文章可能有不足的地方，請大家見諒，如果有什麼疑問可以下方留言討論。
如果大家對文字描述還是不太清楚，建議看我下方提供的視訊，我就是從視訊中學的，這個是在youtube上的視訊，大家懂的，有條件的還是建議看一下。?