[譯]Webpack的奇妙世界

enali 發布于2019-08-21 16:26 / 2230人閱讀

摘要：相反，解釋背后的原理是什么使他比一個構造器更加強大。仍然是構造器類似這樣的工具存在的主要原因之一就是解決依賴問題。是一個模塊構造器，就是前文所說的。

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 + "
"
            + "window.onload = function() { 
"
            + " console.log("This is from the loader!"); 
"
            + "}";
    };

這是一個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

GPU云服務器云服務器莫名奇妙 webpack的作用 webpack的cdn linux下編譯阿里

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88547.html

Webpack下莫名其妙出現的jQuery與報錯，記一次奇妙的Debug旅程

摘要：在過程中，發現的報錯是在中兩個頁面的無刷切換中出現的。看向網址等等網址的前綴是，這個是谷歌瀏覽器插件的前綴。難不成，這個文件是谷歌瀏覽器插件的于是看向了中間的那一串神秘字符串。場景重現項目是一個SPA，使用了Vue+Vue-Router+Webpack+jQuery。報錯的場景如下：showImg(http://7xk109.com1.z0.glb.clouddn.com/blog...

Scliang 2019-08-19 17:13 評論0 收藏0
從零開始的webpack生活-0x005：DefinePlugin奇妙用處

摘要：注意該插件是簡單的字符串替換，所以如果是定義常量最好使用包裹要替換的內容，或者使用轉化，否則會變成代碼直接插入，比如版本號這樣替換的時候就會變成而不會變成導致錯誤的數據格式。 0x001 概述上一章講的是js壓縮混淆，和這一章沒有半毛錢關系，這章講的是DefinePlugin，一個好像沒有用，但其實很好用的一個插件，我很喜歡，嘿嘿嘿！ 0x002 插件介紹說白了，這是一個簡單的字符...

The question 2019-08-21 17:28 評論0 收藏0
2017-06-16 前端日報

摘要：前端日報精選漸進式動畫解決方案從前端開發看面向未來的敏捷學習法知乎專欄深度剖析現代應用眾成翻譯譯關于你需要知道的一切構建離線優先的應用知乎專欄中文為何默認開啟四進程不犧牲內存占用異步一淺出異步事件性能調優之內存篇二知乎專欄之性能 2017-06-16 前端日報精選漸進式動畫解決方案從前端開發看面向未來的敏捷學習法 - 知乎專欄深度剖析現代 JavaScript 應用 — SiteP...

_ipo 2019-08-20 17:18 評論0 收藏0
【譯】一個小時搭建一個全棧Web應用框架（上）

摘要：初始項目設置我們將使用包管理器來處理依賴項。使用包管理器可以使您的項目依賴項保持最新狀態，并能夠獲取和安裝最新的包。是小型應用的最佳選擇之一。翻譯：瘋狂的技術宅英文標題：Creating a full-stack web application with Python, NPM, Webpack and React英文原文：https://codeburst.io/creating....

wizChen 2019-08-21 11:59 評論0 收藏0
【譯】一個小時搭建一個全棧Web應用框架（上）

摘要：初始項目設置我們將使用包管理器來處理依賴項。使用包管理器可以使您的項目依賴項保持最新狀態，并能夠獲取和安裝最新的包。是小型應用的最佳選擇之一。翻譯：瘋狂的技術宅英文標題：Creating a full-stack web application with Python, NPM, Webpack and React英文原文：https://codeburst.io/creating....

Doyle 2019-07-30 14:29 評論0 收藏0