什么是webpack

可以引用官網的一幅圖解釋，我們可以看到webpack，可以分析各個模塊的依賴關系，最終打包成我們常見的靜態文件，.js 、 .css 、 .jpg 、.png。今天我們先不弄那么復雜，我們就介紹webpack是怎么分析ES6的模塊依賴，怎么把ES6的代碼轉成ES5的。

實現

由于ES6轉ES5中需要用到babel，所以要用到一下插件

npm install @babel/cord @babel/traverse @babel/core @babel/preset-env --save-dev

需要的文件

使用webpack肯定少不了原文件，我們會涉及三個需要打包的js文件（entry.js、message.js、name.js）

// entry.jsimport message from './message.js'; console.log(message); // message.jsimport {name} from './name.js'; export default `hello ${name}!`; // name.jsexport 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上的視頻，大家懂的，有條件的還是建議看一下。?

官方40分鐘教你寫webpack

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的理解webpack原理，手写一个100行的webpack的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。