webpack(一)
http://zhaoda.net/webpack-handbook/index.html
Webpack 是當下最熱門的前端資源模組化管理和打包工具。它可以將許多鬆散的模組按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需載入的模組進行程式碼分隔,等到實際需要的時候再非同步載入。通過 loader
的轉換,任何形式的資源都可以視作模組,比如 CommonJs 模組、 AMD 模組、 ES6 模組、CSS、圖片、 JSON、Coffeescript、 LESS 等。
什麼是 Webpack?
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 能夠以令人難以置信的速度快速增量編譯。
相關文章
- 必會webpack(一)--- 初識webpackWeb
- webpack教程(一)Web
- 玩轉webpack系列之webpack核心概念(一)Web
- webpack4系列教程(一):初識webpackWeb
- 初識 webpack (一)Web
- webpack學習(一)專案中安裝webpackWeb
- webpack練手專案之easySlide(一):初探webpackWebIDE
- webpack實戰(一):真實專案中一個完整的webpack配置Web
- webpack一:專案初始化、安裝webpack/webpack-cli、第一次打包、webpack本身只能處理js/json檔案、webpack作用總結WebJSON
- 理解webpack原理,手寫一個100行的webpackWeb
- 【webpack系列】webpack4.x入門配置基礎(一)Web
- 深入淺出的webpack構建工具---webpack基本配置(一)Web
- 如何學習配置webpack(一)Web
- 一次webpack體驗Web
- webpack系列之一總覽Web
- webpack4.X 實戰(一):全面認識webpack、核心概念Web
- 如何一步一步配置webpackWeb
- 如何開發一個 Webpack Loader ( 一 )Web
- 基於webpack構建的angular 1.x 工程(一)webpack篇WebAngular
- webpack4配置學習(一)Web
- 乾貨!擼一個webpack外掛(內含tapable詳解+webpack流程)Web
- 實現一個簡易版WebpackWeb
- 知多一點 webpack 的 CommonsChunkPluginWebPlugin
- 手寫一個webpack4.0配置Web
- webpack 從入門到放棄(一)Web
- 手寫一個 webpack4.0配置Web
- 手寫一個簡易的WebpackWeb
- 從零實現一個 Webpack PluginWebPlugin
- 從0開始學習Webpack(一)Web
- webpack4 系列教程(一): 打包JSWebJS
- 淺析webpack原始碼之前言(一)Web原始碼
- webpack 快速入門 系列 —— 實戰一Web
- Webpack原理與實踐(一):打包流程Web
- webpack入門學習手記(一)Web
- Webpack 是怎樣執行的?(一)Web
- 每天讀一點webpack-001Web
- 一些webpack配置優化手段Web優化
- Webpack 配置中的一股清流Web