正文

本篇部分摘錄于 webpack中文入門指南-模塊系統(tǒng) & webpack dev server

Webpack是一款用戶打包前端模塊的工具，它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源。主要是用來(lái)打包在瀏覽器端使用的javascript的。同時(shí)也能轉(zhuǎn)換、捆綁、打包其他的靜態(tài)資源，包括css、image、font file、template等

webpack的官網(wǎng)是 http://webpack.github.io/ ，文檔地址是 http://webpack.github.io/docs/

市面已存在大量的模塊管理和打包工具，為什么還重復(fù)造輪子，webpack有什么特色？

這些已有的模塊化工具并不能很好的完成如下的目標(biāo)：

  • 將依賴樹(shù)拆分成按需加載的塊

  • 初始化加載的耗時(shí)盡量少

  • 各種靜態(tài)資源都可以視作模塊

  • 將第三方庫(kù)整合成模塊的能力

  • 可以自定義打包邏輯的能力

  • 適合大項(xiàng)目，無(wú)論是單頁(yè)還是多頁(yè)的 Web 應(yīng)用

webpack 特點(diǎn)

代碼拆分
Webpack 有兩種組織模塊依賴的方式，同步和異步。異步依賴作為分割點(diǎn)，形成一個(gè)新的塊。在優(yōu)化了依賴樹(shù)后，每一個(gè)異步區(qū)塊都作為一個(gè)文件被打包。
Loader
Webpack 本身只能處理原生的 JavaScript 模塊，但是 loader 轉(zhuǎn)換器可以將各種類型的資源轉(zhuǎn)換成 JavaScript 模塊。這樣，任何資源都可以成為 Webpack 可以處理的模塊。
智能解析
Webpack 有一個(gè)智能解析器，幾乎可以處理任何第三方庫(kù)，無(wú)論它們的模塊形式是 CommonJS、 AMD 還是普通的 JS 文件。甚至在加載依賴的時(shí)候，允許使用動(dòng)態(tài)表達(dá)式 require("./templates/" + name + ".jade")。
插件系統(tǒng)
Webpack 還有一個(gè)功能豐富的插件系統(tǒng)。大多數(shù)內(nèi)容功能都是基于這個(gè)插件系統(tǒng)運(yùn)行的，還可以開(kāi)發(fā)和使用開(kāi)源的 Webpack 插件，來(lái)滿足各式各樣的需求。
快速運(yùn)行
Webpack 使用異步 I/O 和多級(jí)緩存提高運(yùn)行效率，這使得 Webpack 能夠以令人難以置信的速度快速增量編譯。

總結(jié)下來(lái)其主要的優(yōu)勢(shì)：

  1. 按需加載模塊，按需進(jìn)行懶加載，在實(shí)際用到某些模塊的時(shí)候再增量更新

  2. webpack 是