Webpack的精彩世界

Webpack是一個JavaScript模塊打包工具，如官網宣傳的那樣。它有一個貼切的名字。但在本文中，我想完成的是詳述Webpack真正強大的地方。

本文不會介紹如何使用Webpack，而是解析使它比一般打包工具變得更為特殊的原因。

##Webpack仍是一種打包工具

像Webpack此類工具產生的最主要原因之一，便是解決依賴問題。該依賴問題是JavaScript（尤其是Node.js中的模塊所導致的。

Node.js允許你使用模塊化代碼。代碼的模塊化導致了依賴問題。循環依賴（Cyclic dependencies）可能會產生，例如， A->B->A的引用關係。像Webpack這樣的工具，可以構建模塊引用的完整依賴圖。通過這個圖，分析器可以幫助減輕依賴圖的壓力。

Webpack在代碼中置入多個入口，並有一個輸出，該輸出已完成將依賴圖與一個或多個文件進行捆綁。

Webpack可以做得更多

對於我來說，Webpack如此特殊，緣於它提供的優秀的擴展。

Loaders

Loader是我喜歡提及的mini-transpiler。它適用於任何類型的文件，如TypeScript、CoffeeScript、JSON等，之後產生的JavaScript代碼添加至Webpack正構建的依賴圖中。

Loader的魅力在於，它們是源源不斷的。Loader是一個擴展，你可以創建自己的Loader，目前已有100個默認和大量第三方的Loader。

例如，如果想把靜態類型語言，如C#，編譯成Webpack可以理解的JavaScript，有沒有這樣一個Loader？

Loader具有無限可能，具有可組裝、可配置、基於文件類型進行過濾等特點。

一個普通的例子

正如Webpack文檔中解釋的那樣，一個Loader只是一個可以輸出funtion的Node.js模塊。一個Loader與輸出function的Node.js模塊同樣簡單：

這是解釋Loader是什麼的一個小例子。這個Loader正在添加一個function，該function的功能是在當前的瀏覽器會話中，當Window載入時，在控制台上進行輸出。

記住這一點，我們就不難理解：無論源是任何類型的語言，都可以按我們的想法進行解釋。重新回答我們剛才的例子中，我們可以把C#作為輸入，創建一個解析器，將它轉換為Webpack可以接受的自然JavaScript。

將C#轉換成JavaScript的編譯器，雖有點牽強附會，說實在的有些無意義，但我希望你可以領導會我們是如何利用Loader，讓Webpack不再僅僅是一個bundler。

Plugins

相比於Loader，插件讓Webpack可進行的定製化服務更加廣泛。在插件中，你可以在Webpack中增加額外的功能。例如，你可以添加實現縮小功能的插件，從輸出（如CSS）中提取某些文本，利用插件進行壓縮等。

插件通過自行訪問Webpack編譯器完成工作。它們能訪問可能產生的所有編譯步驟，並可以修改所有的步驟。這意味著一個插件可以修改文件已經生成的內容，可以修改文件引入的內容等。

下面是插件的一個小例子：

該例子中，我們在Webpack編譯器中，為兩個event hook分別添加了事件處理器。其結果是在asset被輸出到結果目錄之前，在控制台列印一個日期，在asset已被輸出後再列印一個日期。

該插件也可以應用到Webpack的配置中：

現在這個插件可以在編譯過程中的emit和after-emit兩個階段運行。Webpack網站上有一個很好的 compiler event hook列表可以使用。

重申一遍，插件的重要性在於它們是擴展。Webpack允許用戶完全擴展它的內核。已有很多插件可供選擇，很多來自第三方。

請記住這一點，插件可以獲取你請求的Asset，並通過一定的演算法對他們進行壓縮。事實上，現在已經有插件可以完成這件事了。

總結

Webpack是一個模塊打包工具。它可以產生依賴圖，輸出瀏覽器可讀的格式。

然而，Webpack還可以做得更多。

假設我們可以將C#代碼編譯成JavaScript會怎樣呢？假設我們獲得一個圖片，想自動完成裁剪與使用灰度來表示會怎樣呢？

我想如果你把Webpack看成一個編譯器，而不僅僅是一個打包工具，那你將看到它真正的強大之處。

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！