資訊專欄INFORMATION COLUMN
摘要：什么是可以引用官網的一幅圖解釋，我們可以看到，可以分析各個模塊的依賴關系，最終打包成我們常見的靜態文件，。我們暫時把通過傳文件路徑能返回文件信息的這個函數叫。
什么是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 數組。
我們通過上面可以拿到entry.js依賴的模塊，于是我們就可以接著去遍歷dependencies 數組，循環調用createAsset這樣就可以得到全部模塊相互依賴的信息。想得到全部依賴信息需要調用 createGraph 這個一個函數，它會進行廣度遍歷，最終返回下面的數據
我們可以看到返回的數據，字段之前都和大家解釋了，除了 mapping，mapping這個字段是把當前模塊依賴的文件名稱 和 模塊的id 做一個映射，目的是為了更方便查找模塊。
bundle返回什么 && 最后步驟我們現在已經能拿到每個模塊之前的依賴關系，我們再通過調用bundle函數，我們就能構造出最后的bundle.js，輸出如下圖
源碼點擊查看源碼
最后文章可能有不足的地方，請大家見諒，如果有什么疑問可以下方留言討論。
如果大家對文字描述還是不太清楚，建議看我下方提供的視頻，我就是從視頻中學的，這個是在youtube上的視頻，大家懂的，有條件的還是建議看一下。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102365.html
摘要：馬上要出了，完全手寫一個優化后的腳手架是不可或缺的技能。每個依賴項隨即被處理，最后輸出到稱之為的文件中，我們將在下一章節詳細討論這個過程。的事件流機制保證了插件的有序性，使得整個系統擴展性很好。 webpack馬上要出5了，完全手寫一個優化后的腳手架是不可或缺的技能。 本文書寫時間 2019年5月9日 , webpack版本 4.30.0最新版本 本人所有代碼均手寫，親自試驗過可...
摘要：馬上要出了，完全手寫一個優化后的腳手架是不可或缺的技能。每個依賴項隨即被處理，最后輸出到稱之為的文件中，我們將在下一章節詳細討論這個過程。的事件流機制保證了插件的有序性，使得整個系統擴展性很好。 webpack馬上要出5了，完全手寫一個優化后的腳手架是不可或缺的技能。 本文書寫時間 2019年5月9日 , webpack版本 4.30.0最新版本 本人所有代碼均手寫，親自試驗過可...
摘要：馬上要出了，完全手寫一個優化后的腳手架是不可或缺的技能。每個依賴項隨即被處理，最后輸出到稱之為的文件中，我們將在下一章節詳細討論這個過程。的事件流機制保證了插件的有序性，使得整個系統擴展性很好。 webpack馬上要出5了，完全手寫一個優化后的腳手架是不可或缺的技能。 本文書寫時間 2019年5月9日 , webpack版本 4.30.0最新版本 本人所有代碼均手寫，親自試驗過可...
閱讀 1141·2021-11-23 10:04
閱讀 2401·2021-11-22 15:29
閱讀 2743·2021-11-19 09:40
閱讀 715·2021-09-22 15:26
閱讀 2117·2019-08-29 16:27
閱讀 2484·2019-08-29 16:10
閱讀 1918·2019-08-29 15:43
閱讀 3275·2019-08-29 12:43
