Hello Webpack.1

02-05

高瞻遠矚（先看文檔）

webpack如何實現的我們不關心，其實對我們使用者來說，它說白了就是一個配置文件，那麼這個配置包含的內容和實現的功能如下：

Plugins（插件）：nwebpack擁有一個強大的插件介面，這個介面實現的功能，大部分都是用內部插件。這樣使得nwebpack非常靈活。n

Performance（性能）：nwebpack使用的是非同步I/O，並且實現不同級別的緩存。這樣使得webpack在增量編譯中非常迅n速。n

Loaders(載入器)：nwebpack支持通過loaders進行預處理，這樣你就可以打包任何類型的靜態資源，不僅僅是njavascript。你可以通過Node.js輕易地編寫一個自己的loaders。n

Support（支持）：nwebpack支持AMD或者CommonJS類型的模塊開發，它可以對你的代碼的AST（抽象語法樹）進行n非常靈活的靜態分析，甚至有一個評估引擎對一些簡單的語法進行評估。這樣可以使得webpackn可以支持大部分現有的庫。n

Splitting（代碼分離）：nwebpack允許將你的代碼庫分割成chunks（塊），chunks會根據需求載入，這樣可以減少初始n載入時間。n

Optimizations（優化）：nwebpack會做許多優化工作來減少打包輸出的文件大小，在對請求進行緩存時它也通過哈希來實n現。n

Development Tools（開發工具）：nwebpack支持SourceUrls和SourceMaps來進行排錯，它可以監控你的文件並且伴隨產生一個n開發中間件和開發伺服器，實現自動載入。n

Multiple targets（多目標）：nwebpack最重要的目標時web，但是它也支持WebWorkers和Node.js的打包。n

了解webpack先從了解它的loaders開始。

Loaders是一個轉換器，用來轉換你的應用中使用到的資源文件。它們是運行在node.js環境中的函數，把你的資源文件作為參數傳遞，最後返回一個新的資源。例如，你可以使用loaders讓webpack載入CoffeeScript或者JSX。

載入器特點：

Loaders可以鏈接使用，它們可以被應用到一個管道中，最後一個loader會返回nJavaScript。其它loader可以返回任意格式，然後傳遞給下一個loader；n

Loaders可以是非同步的，也可以是同步的。它們運行在Node.js環境中；n

Loaders接受查詢參數，因此loaders是可配置的；n

Loaders在配置時可以綁定extensions或者正則表達式；n

Loaders可通過npm進行安裝或者發布；n

Plugins插件可以賦予loaders更多特性。n

引用loaders
Loaders的使用和modules的使用是差不多的，你可以通過npm來管理loaders。為了方便，儘管不是必須的，loaders通常是這樣命名的XXX-loader，XXX是上下文環境名。例如json-loader，你可以通過它的全名來引用，也可以通過簡短的通過json來引用。
使用loaders
require申明中明確表示；

通過webpack配置項中配置；
通過CLI配置。
在require中使用loaders
注意：如果你想要你的腳本可以運行在不確定環境（nodejs和browser）中，盡量避免在nrequire中使用loaders。最好在webpack配置項中配置具體的loaders。n
在require申明（或者define，require.ensure，……）中引用具體的loaders，使用!分隔多個loaders。
注意：當鏈接loaders時，依照從右到左的順序執行。

Configuration
{n module: {n loaders: [n { test: /.jade$/, loader: "jade" },n // => "jade" loader is used for ".jade" filesnn { test: /.css$/, loader: "style!css" },n // => "style" and "css" loader is used for ".css" filesn // Alternative syntax:n { test: /.css$/, loaders: ["style", "css"] },n ]n }n}n
CLI
webpack --module-bind jade --module-bind css=style!cssn
傳遞查詢參數

Loader可以像web中一樣通過字元串傳遞查詢參數，通過?附加到loader，例如url-nloader?mimetype=image/png。n