理解webpack原理，手寫一個100行的webpack

轉自理解webpack原理，手寫一個100行的webpack

什麼是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函數就是返回咱們構造的字符串，拿到字符串，咱們把字符串導出成bundle.js。輸出以下圖

源碼

點擊查看源碼

最後

文章可能有不足的地方，請你們見諒，若是有什麼疑問能夠下方留言討論。

若是你們對文字描述仍是不太清楚，建議看我下方提供的視頻，我就是從視頻中學的，這個是在youtube上的視頻，你們懂的，有條件的仍是建議看一下。😝

官方40分鐘教你寫webpack