什么是webpack

可以引用官網(wǎng)的一幅圖解釋，我們可以看到webpack，可以分析各個(gè)模塊的依賴關(guān)系，最終打包成我們常見(jiàn)的靜態(tài)文件，.js 、 .css 、 .jpg 、.png。今天我們先不弄那么復(fù)雜，我們就介紹webpack是怎么分析ES6的模塊依賴，怎么把ES6的代碼轉(zhuǎn)成ES5的。

實(shí)現(xiàn)

由于ES6轉(zhuǎn)ES5中需要用到babel，所以要用到一下插件

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

需要的文件

使用webpack肯定少不了原文件，我們會(huì)涉及三個(gè)需要打包的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 // 讀取文件信息，并獲得當(dāng)前js文件的依賴關(guān)系 function createAsset(filename) {//代碼略} // 從入口開(kāi)始分析所有依賴項(xiàng)，形成依賴圖，采用廣度遍歷 function createGraph(entry) {//代碼略} // 根據(jù)生成的依賴關(guān)系圖，生成瀏覽器可執(zhí)行文件 function bundle(graph) {//代碼略}

entry.js 就是我們的入口文件，文件的依賴關(guān)系是，entry.js依賴message.js，message.js依賴name.js。

bundler.js 是我們簡(jiǎn)易版的webpack

目錄結(jié)構(gòu)

- example- entry.js- message.js- name.js - bundler.js

如何分析依賴

webpack分析依賴是從一個(gè)入口文件開(kāi)始分析的，當(dāng)我們把一個(gè)入口的文件路徑傳入，webpack就會(huì)通過(guò)這個(gè)文件的路徑讀取文件的信息（讀取到的本質(zhì)其實(shí)是字符串），然后把讀取到的信息轉(zhuǎn)成AST（抽象語(yǔ)法樹(shù)），簡(jiǎn)單點(diǎn)來(lái)說(shuō)呢，就是把一個(gè)js文件里面的內(nèi)容存到某種數(shù)據(jù)結(jié)構(gòu)里，里面包括了各種信息，其中就有當(dāng)前模塊依賴了哪些模塊。我們暫時(shí)把通過(guò)傳文件路徑能返回文件信息的這個(gè)函數(shù)叫 createAsset 。

createAsset返回什么

第一步我們肯定需要先從 entry.js 開(kāi)始分析，于是就有了如下的代碼，我們先不關(guān)心createAsset具體代碼是怎么實(shí)現(xiàn)的，具體代碼我會(huì)放在最后。

createAsset("./example/entry.js");

當(dāng)執(zhí)行這句代碼，createAsset 會(huì)返回下面的數(shù)據(jù)結(jié)構(gòu)，這里包括了模塊的id，文件路徑，依賴數(shù)組（entry.js依賴了message.js，所以會(huì)返回依賴的文件名），code（這個(gè)就是entry.js ES6轉(zhuǎn)ES5的代碼）

通過(guò) createAsset 我們成功拿到了entry.js的依賴，就是 dependencies 數(shù)組。

createGraph返回什么，如何找下一個(gè)依賴

我們通過(guò)上面可以拿到entry.js依賴的模塊，于是我們就可以接著去遍歷dependencies 數(shù)組，循環(huán)調(diào)用createAsset這樣就可以得到全部模塊相互依賴的信息。想得到全部依賴信息需要調(diào)用 createGraph 這個(gè)一個(gè)函數(shù)，它會(huì)進(jìn)行廣度遍歷，最終返回下面的數(shù)據(jù)

我們可以看到返回的數(shù)據(jù)，字段之前都和大家解釋了，除了 mapping，mapping這個(gè)字段是把當(dāng)前模塊依賴的文件名稱 和 模塊的id 做一個(gè)映射，目的是為了更方便查找模塊。

bundle返回什么 && 最后步驟

我們現(xiàn)在已經(jīng)能拿到每個(gè)模塊之前的依賴關(guān)系，我們?cè)偻ㄟ^(guò)調(diào)用bundle函數(shù)，我們就能構(gòu)造出最后的bundle.js，輸出如下圖

源碼

點(diǎn)擊查看源碼

最后

文章可能有不足的地方，請(qǐng)大家見(jiàn)諒，如果有什么疑問(wèn)可以下方留言討論。

如果大家對(duì)文字描述還是不太清楚，建議看我下方提供的視頻，我就是從視頻中學(xué)的，這個(gè)是在youtube上的視頻，大家懂的，有條件的還是建議看一下。?

官方40分鐘教你寫webpack

與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。