webpack概述

文檔部分翻譯內容來自:

Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需加載的模塊進行代碼分隔注册送28体验金的游戏平台,等到實際需要的時候再異步加載。通過 loader 的轉換,任何形式的資源都可以視作模塊注册送28体验金的游戏平台,比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。

webpack已經是大部分前端項目打包工具的首選,grunt、glup、browserify等逐漸淪為輔助甚至完全被替代。在grunt、glup、browserify等已經相當火了之后,webpack長江后浪推前浪注册送28体验金的游戏平台,把前輩們拍死在沙灘上,實力驚人。

根據GitHub上的迭代發展看來,通過Issues、Release、Commit等看,webpack發展相當不錯,已經有2.2版本,最大的更新應該是支持ES6 Modules,根據ES6的特性來做一些Code Splitting等。

老式的任務運行器的方式:你的標記、樣式和 JavaScript 是分離的。你必須分別管理它們每一個,并且你需要確保每一樣都達到產品級

任務運行器(task runner),例如 Gulp,可以處理許多不同的預處理器(preprocesser)和轉換器(transpiler),但是在所有的情景下,它都需要一個輸入源并將其壓縮到一個編譯好的輸出文件中。然而,它是在每個部分的基礎上這樣做的,而沒有考慮到整個系統。這就造成了開發者的負擔:找到任務運行器所不能處理的地方,并找到適當的方式將所有這些模塊在生產環境中聯合在一起。

Webpack 試圖通過提出一個大膽的想法來減輕開發者的負擔:如果有一部分開發過程可以自動處理依賴關系會怎樣?如果我們可以簡單地寫代碼,讓構建過程最終只根據需求管理自己會怎樣?

Webpack 的方式:如果 Webpack 了解依賴關系,它會僅捆綁我們在生產環境中實際需要的部分

如果你過去幾年一直參與 web 社區,你已經知道解決問題的首選方法:使用 JavaScript 來構建。而且 Webpack 嘗試通過 JavaScript 傳遞依賴關系使得構建過程更加容易。不過這個設計真正的亮點不是簡化代碼管理部分,而是管理層由 100% 有效的 JavaScript 實現(具有 Nodejs 特性)。Webpack 能夠讓你編寫有效的 JavaScript,更好更全面地了解系統。

換句話來說:你不需要為 Webpack 寫代碼。你只需要寫項目代碼。而且 Webpack 就會持續工作(當然需要一些配置)。

簡而言之,如果你曾經遇到過以下任何一種情況:

  • 載入有問題的依賴項
  • 意外引入一些你不需要在生產中用上的 CSS 樣式表和 JS 庫,使項目膨脹
  • 意外的兩次載入(或三次)庫
  • 遇到作用域的問題 —— CSS 和 JavaScript 都會有
  • 尋找一個讓你在 JavaScript 中使用 Node/Bower 模塊的構建系統,要么就得依靠一個令人發狂的后端配置才能正確地使用這些模塊
  • 需要優化資產asset交付,但你擔心會弄壞一些東西

等等……

那么你可以從 Webpack 中收益了。它通過讓 JavaScript 輕松處理你的依賴關系和加載順序,而不是通過開發者的大腦。的部分是,Webpack 甚至可以純粹在服務器端運行,這意味著你還可以使用 Webpack 構建漸進增強式網站。


下一篇:第一部分:概念入口