[譯]Webpack的奇妙世界

Webpack是一個JavaScript模塊構造器。 這是適合它功能的名稱。 可是，我想在本文中展示Webpack的真正功能。

本文將不講解如何使用Webpack。 相反，解釋背後的原理：是什麼使他比一個構造器更增強大。

Webpack仍然是構造器

相似webpack這樣的工具存在的主要緣由之一就是解決依賴問題。 JavaScript中的模塊引發的依賴問題; 特別是Node.js.

Node.js容許您模塊化代碼。 代碼的模塊化致使依賴關係的問題。 可能會發生循環依賴，例如，A - > B - > A引用。 Webpack怎麼解決這個問題呢？它使用了工具來構建全部引用模塊的完整依賴圖。 使用此圖表，能夠進行分析，以幫助您緩解這種依賴圖的壓力。

Webpack容許你的代碼中有多個入口，並將一個將依賴關係圖捆綁到一個或多個輸出的文件。

Webpack遠不止這些

對我而言，使webpack如此特別的是它提供的很大的擴展點。

Loaders

Loaders是我喜歡稱之爲迷你透明機。 他們載入任何類型的文件 - 例如TypeScript，CoffeeScript，JSON等 - 併產生JavaScript代碼，以便之後添加到Webpack正在構建的依賴關係圖中。

Loaders的強大之處在於它們數量不少。 Loaders是一個擴展點。 您能夠建立本身的加載程序，而且有100個或者更多的第三方加載程序。

例如，有沒有一個Loaders使咱們能夠採用像C＃這樣的靜態類型語言，並將其轉化爲JavaScript？

這就對Loaders有了一些限制。Loaders能夠根據文件類型等進行連接，配置，過濾。

Custom Loader Example

如webpack文檔所解釋的，Loader只是一個導出功能的節點模塊。 一個loader與一個導出函數的nodejs模塊同樣簡單：

module.exports = function(src) {
        return src + '\n'
            + 'window.onload = function() { \n'
            + ' console.log("This is from the loader!"); \n'
            + '}';
    };

這是一個Lodader的簡單例子。 這個Lodader正在作的是在當前瀏覽器會話的窗口加載上附加一個函數來寫入控制檯。

根據這個想法，咱們能夠採起任何來源的輸入，而且能夠插入任何咱們須要的輸入。 因此回到咱們前面的例子，咱們能夠用C＃做爲輸入，並建立一個解析器，將它轉化爲Webpack但願的本地JavaScript。

一個C＃到JavaScript的轉換器是有點牽強，實在點就是根本毫無心義，但我但願讀者能從中體會到webpack比一個普通構造器強大的地方

Plugins

插件容許webpack擴展性比經過文件傳文件方式的Loader更強。插件容許你向webpack核心插入更多的功能，例如您能夠添加一個用於縮小的插件; 從輸出中提取某些文本，如CSS; 使用插件進行壓縮，等等。

插件能夠經過訪問Webpack編譯器來工做。 他們能夠訪問可能發生並可能發生的全部編譯步驟，並能夠修改這些步驟。 這意味着一個插件能夠修改什麼文件作爲源文件，添加什麼文件做爲靜態資源，等等。

插件的一個小例子以下：

file: './my-custom-plugin.js'

function MyCustomPlugin() {}

MyCustomPlugin.prototype.apply = function(compiler) {
    compiler.plugin('emit', displayCurrentDate);
    compiler.plugin('after-emit', displayCurrentDate)
}

function displayCurrentDate(compilation, callback) {
    console.log(Date());

    callback();
}

module.exports = MyCustomPlugin;

在這個例子中，咱們將兩個事件處理程序添加到Webpack編譯器中的兩個單獨的事件鉤子中。 其結果是將在emit以前打印日期日誌，emit以後打印日期日誌

在Webpack配置文件中能夠這樣子配置：

var MyCustomPlugin = require('my-custom-plugin');

var webpackConfig = {
    ...
    plugins: [
        new MyCustomPlugin()
    ]
}

插件將會在emit和after-emit的時候執行，webpack的編輯鉤子函數列表在webpack官網能夠找到

插件的重要性就是它也是一個擴展點。 Webpack的設計方式是讓用戶徹底擴展Webpack的核心。 有不少插件可供選擇，不少是第三方。

考慮到這一點，插件能夠佔用您須要的全部資源，並使用算法進行壓縮。 事實上，已經有一個插件爲這件事情。

Summary

Webpack是一個模塊構造器，就是前文所說的。 它須要您的依賴關係圖，並輸出瀏覽器能夠讀的格式。

可是webpack能作的不止這些

若是咱們能夠採用C＃代碼，並將其轉換成JavaScript？ 若是咱們可使用YAML配置文件，並建立一個剛剛配置的工做程序怎麼辦？ 若是咱們拍攝圖像，並自動將其裁剪和灰度，該怎麼辦？

我認爲，若是您開始將Webpack視爲一個轉換器，而不只僅是加載器，則能夠看到Webpack的真正實力。

感謝您的閱讀，但願這會有所幫助。

關注個人公衆號，更多優質文章定時推送

翻譯自 The Wonderful World of Webpack