之前學(xué)習(xí)過webpack3的知識，但是webpack4升級后還是有很多變動的，所以這次重新整理一下webpack4的知識點，方便以后復(fù)習(xí)。

這次學(xué)習(xí)webpack4不僅僅要會配置，記住核心API，最好還要理解一下webpack更深層次的知識，比如打包原理等等，所以可能會省略一些比較基礎(chǔ)的內(nèi)容，但是希望我可以通過此次學(xué)習(xí)掌握webpack，更好地應(yīng)對以后的工作。

這一節(jié)會深入理解webpack原理

1.模塊分析

我們這一次會實現(xiàn)一個類似webpack的工具，首先來寫模塊分析部分。

代碼地址：

代碼倉庫

先把目錄搭好，src下有三個js文件，每個文件里面對應(yīng)以下內(nèi)容：

word.js

message.js

index.js

現(xiàn)在這個代碼在瀏覽器中是沒有辦法運行的，需要借助類似webpack這種工具才可以，所以我們需要借助node.js實現(xiàn)一個打包工具。

和src同級，我們新建一個bundler.js。

創(chuàng)建一個函數(shù)，用來分析打包入口文件，支持傳入一個參數(shù)（文件路徑），然后利用node讀取文件內(nèi)容。

而index中引用了message.js，我們需要把引用的文件名提取出來，要借助@babel/parser分析我們的源代碼。

cnpm install @babel/parser --save 復(fù)制代碼

@babel/parser提供了一個parse方法，第一個參數(shù)傳入文件內(nèi)容，第二個參數(shù)傳一個對象。

方法返回的對象是一個抽象語法樹（AST）。

對象里面有一個program.body，內(nèi)容是這樣的：

第一個Node的type是ImportDeclaration，意思是引入聲明語句，我們index.js中第一行確實是引入語句。第二個Node的type是ExpressionStatement，意思是表達式語句，我們第二行寫的console.log()，確實是表達式語句。所以借助這個工具，我們就可以分析文件之間的依賴關(guān)系。

為了找出所有的依賴關(guān)系，我們要遍歷所有type是ImportDeclaration的語句，自己寫會比較麻煩，還可以借助@babel/traverse

cnpm install --save @babel/traverse 復(fù)制代碼

traverse是一個函數(shù)，第一個參數(shù)接受抽象語法樹，第二個參數(shù)是一個對象。

抽象語法樹中有元素的type是ImportDeclaration時，就會執(zhí)行ImportDeclaration函數(shù)，它接受的參數(shù)可以解構(gòu)出一個node，它就是所有type是ImportDeclaration的元素，就是我們所有的依賴，里面喲一個source，value值就是文件名，所以我們就可以把所有文件名都存起來

聲明一個數(shù)組，把所有node中的soure.value都push到數(shù)組中。

這樣入口分析就已經(jīng)分析好了，但是這時候分析的依賴都是相對路徑，我們要把它改為絕對路徑，或者是相對于根路徑的相對路徑，這樣才不會有問題，所以要借助node中的path。

但是我們?yōu)榱朔奖阋院箝_發(fā)，現(xiàn)在應(yīng)該把絕對路徑和相對路徑都存好，所以把原先的數(shù)組變成對象，用以下方法存起來。

對象的key是相對路徑，value是絕對路徑。

然后就返回入口文件名，和文件所有依賴的內(nèi)容。

但是我們用的ES Module引入文件，瀏覽器無法識別這個語法，就要依賴@babel/core。

cnpm install --save @babel/core 復(fù)制代碼

@babel/core提供了一個方法，transformFromAst，可以把抽象語法樹轉(zhuǎn)化成瀏覽器可以運行的代碼。

傳入的參數(shù)中還可以配置ES6轉(zhuǎn)ES5的插件，所以要先安裝一下@babel/preset-env。

cnpm install --save @babel/preset-env 復(fù)制代碼

函數(shù)會返回一個對象，里面有一個code屬性，code屬性中就是我們?yōu)g覽器可以運行的代碼。

最后返回我們分析的結(jié)果。

返回的結(jié)果意思是：入口文件是index.js；引用的依賴是message.js，地址是src/message.js；瀏覽器中可以運行的代碼是code中的內(nèi)容。

2.依賴圖譜

我們現(xiàn)在只分析了入口文件的依賴，接下來我們要開始分析其他依賴，從message開始，一層一層把所有依賴都分析完。

我們再創(chuàng)建一個函數(shù)，用來制作依賴圖譜，利用類似遞歸的方式，調(diào)用moduleAnalyser逐層分析依賴內(nèi)容，并把它們都放到一個數(shù)組中。

最后生成的數(shù)組。

然后我們把它整合成一個對象，用路徑作為key，依賴和代碼作為value，并且返回這個對象。

對象的內(nèi)容。

3.生成代碼

拿到依賴圖譜，現(xiàn)在要開始生成瀏覽器可以運行的代碼了。

先看生成的代碼中，存在require和exports兩個方法，但是瀏覽器中沒有這兩個方法，所以我們要先定義這兩個方法，然后把生成的代碼片段利用閉包的形式執(zhí)行。

require函數(shù)中，通過傳入路徑拿到對應(yīng)的代碼，利用eval()執(zhí)行，如果require中有依賴，繼續(xù)執(zhí)行require時拿到的就是相對路徑，需要轉(zhuǎn)成絕對路徑，直接去我們之前創(chuàng)建的對象中取就可以。

exports是一個空對象即可，這樣導(dǎo)出的內(nèi)容會被存到exports中。

然后把生成的代碼格式化一下，復(fù)制到瀏覽器中執(zhí)行。

就打印出say hello了。

這樣，我們就已經(jīng)實現(xiàn)了一個簡易的webpack打包工具了，具體代碼可以去我的github倉庫里面看。

參考

從基礎(chǔ)到實戰(zhàn) 手把手帶你掌握新版Webpack4.0 ----DellLee

轉(zhuǎn)載于:https://juejin.im/post/5d00fbbb5188255e780b64b1

總結(jié)

以上是生活随笔為你收集整理的复习webpack4之实现简易的webpack的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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