webpack(一)

weixin_34291004發表於2017-08-17

http://zhaoda.net/webpack-handbook/index.html
Webpack 是當下最熱門的前端資源模組化管理和打包工具。它可以將許多鬆散的模組按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需載入的模組進行程式碼分隔,等到實際需要的時候再非同步載入。通過 loader
的轉換,任何形式的資源都可以視作模組,比如 CommonJs 模組、 AMD 模組、 ES6 模組、CSS、圖片、 JSON、Coffeescript、 LESS 等。
什麼是 Webpack?
Webpack 是一個模組打包器。它將根據模組的依賴關係進行靜態分析,然後將這些模組按照指定的規則生成對應的靜態資源。

5923675-e94312213f603f6a.png
什麼是webpack

為什麼重複造輪子
市面上已經存在的模組管理和打包工具並不適合大型的專案,尤其單頁面 Web 應用程式。最緊迫的原因是如何在一個大規模的程式碼庫中,維護各種模組資源的分割和存放,維護它們之間的依賴關係,並且無縫的將它們整合到一起生成適合瀏覽器端請求載入的靜態資源。
這些已有的模組化工具並不能很好的完成如下的目標:
將依賴樹拆分成按需載入的塊
初始化載入的耗時儘量少
各種靜態資源都可以視作模組
將第三方庫整合成模組的能力
可以自定義打包邏輯的能力
適合大專案,無論是單頁還是多頁的 Web 應用

Webpack 的特點
Webpack 和其他模組化工具有什麼區別呢?
程式碼拆分
Webpack 有兩種組織模組依賴的方式,同步和非同步。非同步依賴作為分割點,形成一個新的塊。在優化了依賴樹後,每一個非同步區塊都作為一個檔案被打包。
Loader
Webpack 本身只能處理原生的 JavaScript 模組,但是 loader 轉換器可以將各種型別的資源轉換成 JavaScript 模組。這樣,任何資源都可以成為 Webpack 可以處理的模組。
智慧解析
Webpack 有一個智慧解析器,幾乎可以處理任何第三方庫,無論它們的模組形式是 CommonJS、 AMD 還是普通的 JS 檔案。甚至在載入依賴的時候,允許使用動態表示式 require("./templates/" + name + ".jade")

外掛系統
Webpack 還有一個功能豐富的外掛系統。大多數內容功能都是基於這個外掛系統執行的,還可以開發和使用開源的 Webpack 外掛,來滿足各式各樣的需求。
快速執行
Webpack 使用非同步 I/O 和多級快取提高執行效率,這使得 Webpack 能夠以令人難以置信的速度快速增量編譯。

相關文章