webpack模塊依賴管理介紹

http://webpack.github.io/docs/

webpack is a module bundler.

• 是一個模塊管理器
• webpack可以管理模塊的依賴關系，並產生可以替代這些模塊的靜態代碼

 

---

 

已有方案 V.S. Webpack

• <script>:

• • <script src="module1.js"></script>
    <script src="module2.js"></script>
    <script src="libaryA.js"></script>
    <script src="module3.js"></script>

  • 沖突，加載順序，依賴，長且難於管理
• commonjs（同步）：

• • require("module");
    require("../file.js");
    exports.doStuff = function() {};
    module.exports = someValue;

  • 網絡同步請求塊級調用不適用，多模塊無法並行調用
  • 實踐：nodejs，browerify，modules-webmake（編譯成為一個bundle），wrep（客戶端）
• AMD（異步）：

• • require(["module", "../file"], function(module, file) { /* ... */ });
    define("mymodule", ["dep1", "dep2"], function(d1, d2) {
      return someExportedValue;
    });

  • 適用於網絡異步模型，多模塊並行加載
  • 代碼過重難於讀寫，更像是為了解決問題的變通方法
• ES6 MODULES：

• • import "jquery";
    export function doStuff() {}
    module "localModule" {}

  • 易於靜態分析，確認為未來的ES標准
  • 原生瀏覽器支持需要時間，僅有很少模塊采用這種形式
• webpack：
• • 讓開發者選擇模塊風格，允許已有代碼正常運行，易於添加用戶模塊類型

 

---

模塊轉移方案：

• 模塊需要在客戶端運行，所以模塊需要從服務端轉移到瀏覽器端
• 兩種極端的轉移方法
• • 一個請求一個模塊
  • • 優點：僅請求需要的模塊
    • 缺點：多模塊請求次數過多
    • 缺點： 請求延時導致app打開過慢
  • 一個請求所有模塊
  • • 優點：請求次數減少，請求延時減少
    • 缺點：不能夠按需請求
• 模塊組（chunked）轉移：當編譯所有模塊時：將模塊集合划分為多個小一些的模塊組。
• • 通過這種方法我們得到多個更小的請求，初始化時不需要的模塊組可以按需請求，初始化請求不在包含完整模塊代碼並且變得更小了。
  • 模塊組的划分（代碼分割）取決於開發者的需求並且是可選的。
  • 大量代碼庫成為可能。
  • GOOGLE’S GWT： http://www.gwtproject.org/doc/latest/DevGuideCodeSplitting.html
  • 更多代碼分割資料： http://webpack.github.io/docs/code-splitting.html

 

---

其他資源依賴管理支持：

• 資源
• • 樣式，圖片，webfonts，html模板等
  • coffeescript，less樣式表，jade模板，i18n文件
• 解決方案： Using loaders 和 Loaders

 

---

靜態分析：

• 當編譯全部模塊的時候，靜態分析系統會嘗試找到對應依賴
• 現狀：通常該系統只能找到沒有表達式的簡單依賴，但是表達式方式確是很常見的require("./template/" + templateName + ".jade")
• 解決方案：智能解析器允許大部分的已有代碼正常運行，即使開發者做了什么奇怪的事情，解析器也會找到兼容性最好的解決方案。

---

以上內容翻譯整理自 http://webpack.github.io/docs/motivation.html