爲何使用webpack?

什麼是webpack?

webpack是一個模塊打包器

webpack獲取帶依賴的模塊併產生出與這些模塊相對於的靜態資源.

webpack的目標:

• 拆分依賴樹成塊並按需加載

• 讓初始化加載時間更少

• 每個靜態資源應該是一個模塊

• 可以集成第三方類庫

• 適用於大型項目

• 可以定製模塊打包的每個部分

特色

Plugins(插件)

webpack有着豐富的插件接口,這使得webpack很是的靈活

Performance(性能)

webpack使用異步I/O和多級緩存,這使得webpack在增量編譯上極其快.

Loader(裝載機)

webpack支持經過裝載機預處理文件.這容許你處理任何靜態資源(不單單是JavaScript),你能夠很輕鬆的寫出在Nodejs上運行的裝載機.

Suport(支持)

webpack支持AMD和CommonJs模塊樣式.它巧妙的在你代碼的AST中進行靜態分析,它甚至還能處理簡單的表達式,這樣就容許你支持更多的類庫.

Code Splitting(代碼拆分)

webpack容許你將你的代碼拆分紅塊,每塊代碼按需加載,這樣就能夠減小初始化加載時間.

Optimizations(優化)

webpack能夠大量的優化來減小輸出的大小,並使用hashes來實現請求緩存.

Development Tools(開發工具)

webpack支持SourceUrls和SourceMaps進行簡單的調試.經過development middleware來監控文件和development server來自動刷新.

Multiple targets(多個目標)

webpack的主要目標是web,同時它也支持爲nodejs和WebWorkers上的代碼打包.

Motivation(動機)

如今的website正在慢慢演變爲webapps:

• 愈來愈多的JavaScript代碼被使用

• 現代瀏覽器提供了豐富的接口

• 更少的全頁面重載，也就意味着單頁面須要加載更多的代碼.

這樣的結果就是大量的代碼會存在於client side.這樣大量的代碼就須要被組織.模塊系統能夠有效的管理你的代碼.

組織代碼的方式.

<script>標籤方式(不存在模塊系統)

缺點:

• 容易致使全局衝突

• 文件加載的順序很重要(被依賴的需放到前面)

• 開發者須要處理類庫之間的依賴

• 在大型項目中加載列表(<script>標籤)可能會很長，而且難於管理

CommonJS

缺點:

• 阻塞調用在網絡中調用並非很好,網絡請求是異步的.

• 多個模塊無平行加載

AMD及其衍生

缺點

• 編碼開銷。閱讀和編寫都更加困難.

• 彷佛是某種變通方法

ES6 Modules

缺點

• 瀏覽器支持須要時間

• 很是少的模塊化管理是以這種方式進行管理

資源

webpack官方文檔:http://webpack.github.io/docs/