Introduction
對於較大的web 應用來說，將所有的代碼文件壓縮成一個文件是不合適的，在部分代碼文件只有特殊情況下才被需要的情況下，這無疑是一種浪費。webpack 提供了講代碼文件分塊的能力。
這里需要注意的是：webpack並不是把原來的一個大文件，簡單的進行拆分，而是在這個基礎上，提供了按需加載特定塊的能力。這樣使得應用在最初加載的代碼量可以盡量的小。
Defining a split point
AMD 與 CommonJs標准個自定義了按需加載代碼的方式，webpack會將它們識別成分割點。
require.ensure(CommonJs)
require.ensure(dependencies, callback)
ensure使得我們可在所有的dependencies項加載完畢后，再執行回調 。
require.ensure(["module-a", "module-b"], function(require) {
var a = require("module-a");
// ...
});
ensure僅僅是加載組件，並不會執行，若要執行，需要借助傳進去的require參數。
require(AMD)
require(dependencies, callback)
與CommonJs式的require處理不同，所有的組件經異步獲取到后，會立即執行(以從左至右的順序)。
require(["module-a", "module-b"], function(a, b) {
// ...
});
DEMO
讓我們創建如下三個文件:
main.js
firstScript.js
secondScript.js
在main.js中，寫入如下代碼：
require.ensure(["./firstScript.js"], function(require) {
});
require(["./secondScript.js"], function(require) {
});
為了測試，我們給firstScript和secondScript分別在全局對象上掛一個屬性。
firstScript.js
window.a = 1;
secondScript.js
window.b = 1;
webpack的安裝，配置方面前兩篇博文已有說明，故不贅述。
webpack -w
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="dist/bundle.js" charset="utf-8"></script>
</head>
<body>
</body>
</html>
訪問webpack 在開發者工具中，我們可以看到代碼被分為了3個塊加載。
並且，在控制台，拿不到a的值(代碼未執行)，可以拿到b的值。大家可以試試。
這樣，在實際的代碼中，我們可以到了特定的應用場合按需加載代碼塊。
Chunk content
在[]中的依賴項被組成了新的塊。如果我們傳入的回調函數中，有一些依賴項，並且這些依賴項是父環境沒有的，webpack也會將它們考慮在內。一起附到新的塊中。
本文完。