假如你一直跟著做的話，example5 分支便在此結束。不同插件傳入的參數或者配置項也大異其趣，其原因在于插件種類繁多且涵蓋范圍廣闊，但殊途同歸的是，他們最終都會被添加到 webpack.config.js 的 plugins 數組中。同樣，也有其他方式可以處理 HTML 頁面的生成和文件名填充，一旦你開始為打包后的文件添加清緩存哈希值（cache-busting hashes）后綴，這些事情就會變得非常簡單。

觀察示例倉庫，你會發現有一個 example6 分支，在該分支里我通過添加插件實現了 JS 代碼壓縮，但這不是必須的，除非你想改動 UglifyJS 配置。如果你不爽 UglifyJS 的默認配置，可將倉庫切換 (check out)至該分支下（只需要查看 webpack.config.js ）去找到如何使用該插件并加以配置。但如果默認配置正合你意，你只需要在命令行運行 webpack 時傳入 -p 參數。該參數是 production 的簡寫，與使用 --optimize-minimize 和 --optimize-occurence-order 參數的效果一樣，前者用以壓縮 JS 代碼，后者用以優化已引入模塊的順序，著眼于稍小的文件尺寸和稍快的執行速度。在示例倉庫完成一段時間后我才知道 -p 這個參數，所以我決定保存該插件示例，可以用來提醒你還有更簡單的方法（除了添加插件之外）。另一可供使用的快捷命令參數是 -d ，-d 會展示更多 Webpack 打印出的信息，并且可不借助其他參數生成資料圖（source map）。還有很多其他命令行快捷參數可供使用。

懶加載（lazy-loading）模塊是我在 RequireJS 中用得舒適但在 Browserify 中難以工作的模塊。一個頗具規模的 JS 文件固然可以從減少網絡請求中受益，但也幾乎坐實了在一次會話中，某些用戶不必用到的代碼會被下載下來。

Webpack 可以將打包文件拆分成可被懶加載的若干塊（chunks），而且還不需要任何配置。你僅需要從兩種書寫方式中挑一種來書寫代碼，剩下的則交給 Webpack。這兩種方式其一基于 CommonJS ，其二則基于 AMD。如果使用前者懶加載，需要這樣寫：

require.ensure(["module-a", "module-b"], function(require) {
    var a = require("module-a");
    var b = require("module-b");
    // …
});

require.ensure 需要確保模塊是可用的（但并非運行模塊），然后傳入一個由模塊名構成的數組，接著傳入一個回調函數（callback）。真正想要在回調函數里使用模塊，你需要顯式 require 數組里傳入的相應模塊。

私以為這種方式相麻煩，所以，我們來看 AMD 的寫法。

require(["module-a", "module-b"], function(a, b) {
    // …
});

AMD 模式下，使用 require 函數，傳入包含依賴模塊名的數組，接著再傳入回調函數。該回調函數的參數就是依賴模塊的引用，它們的排列順序與依賴模塊在數組中的排列順序相同。

Webpack 2 同時也支持 System.import，其借助于 promises 而非回調函數。盡管將回調內容包裹在 promise 下并非難事，但我仍以為該提升非常有用。不過需要注意的是， System.import 現已過時，較新的規范推薦使用 import()。不過，這里告誡一下， Babel （以及 TypeScript）會在你使用System.import的時候拋出語法異常。你可以借助于 babel-plugin-dynamic-import-webpack 插件，但該插件將會將其轉化為 require.ensure，而不是讓 Babel 合法處理新 import 或者任之由 Webpack 處置。我認為 AMD 或 require.ensure 在很久之后才會被棄置，且 Webpack 直到第三個版本才會支持 System.import ，那還遠著呢，所以用你順眼的那個就好了。

擴充我們的代碼，令其停滯兩秒，然后再將 Handlebars 模板懶加載進來并輸出到屏幕上。為此，我們移除頂部 import 模板的語句，然后將最后一行包裹到 setTimeout 和 AMD 模式的 require 中引入模板。

運行 npm start ，你會發現生成了另外一個名為 1.bundle.js 的資源文件（asset）。在瀏覽器打開該頁面，然后在開發者工具中監聽網絡流量，2秒之后你會發現新的資源文件最終被加載并且運行了。以上這些實現起來并不困難，但提升用戶體驗可不止一點。

注意，這些二級打包文件（sub-bundles）或曰數據塊（chunks），內部囊括了他們的所有依賴模塊（dependencies），但不包含其主數據塊（parent chunks）已引入的依賴模塊。（你可以有多個入口文件，每個都懶加載一個數據塊，因此該數據塊在其主數據塊中加載的依賴模塊也會不同。）

我們再說一個優化的點：公共庫數據塊。你可以定義一個多帶帶用以打包的 bundle，該 bundle 中存放不常改動的 “common” 庫或第三方代碼。該策略可使用戶獨立緩存你的公共庫文件，以區別于業務代碼，以便在你迭代應用時讓用戶無需重新下載該庫文件。

為此，我們使用 Webpack 官方插件：CommonsChunkPlugin。它已附帶在 Webpack 中，所以我們無需安裝。僅對 webpack.config.js 稍作修改即可：

var HtmlwebpackPlugin = require("html-webpack-plugin");
var UglifyJsPlugin = require("webpack/lib/optimize/UglifyJsPlugin");
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

module.exports = {
    entry: {
        vendor: ["babel-polyfill", "lodash"],
        main: "./src/main.js"
    },
    output: {
        path: "./dist",
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /.jsx?$/, loader: "babel-loader", exclude: /node_modules/,
                options: { plugins: ["transform-runtime"], presets: ["es2015"] }
            },
            { test: /.hbs$/, loader: "handlebars-loader" }
        ]
    },
    plugins: [
        new HtmlwebpackPlugin({
            title: "Intro to webpack",
            template: "src/index.html"
        }),
        new UglifyJsPlugin({
            beautify: false,
            mangle: { screw_ie8 : true },
            compress: { screw_ie8: true, warnings: false },
            comments: false
        }),
        new CommonsChunkPlugin({
            name: "vendor",
            filename: "vendor.bundle.js"
        })
    ]
};

我們在第三行引入該插件。此后，在 entry 部分修改配置，將其換成了一個對象字面量（literal），用以指定多入口。vendor 入口記錄了會在公共庫數據塊中——這里包含了 polyfill 和 Lodash ——被引入的庫并將我們的主要入口放置在 main 入口里。接著，我們僅需將 CommonsChunkPlugin 添加到 plugins 部分，指定 “vendor” 數據塊作為該插件生成數據塊的索引，同時指定 vendor.bundle.js 文件用以存放公共庫代碼（譯者注：這里插件配置中的 name: "vendor" 對應 entry 中的 vendor 入口，入口數組中指定的依賴模塊即最終存放于 vendor.bundle.js 文件中的依賴模塊）。

通過指定 “vendor” 數據塊，該插件將拉取此數據塊所有的依賴模塊，并將其存放于公共庫數據塊內，這些依賴模塊在一個多帶帶入口文件里被指定。如果不在入口對象字面量中指定數據塊名，插件會基于多入口文件之間公用的依賴模塊來生成獨立文件。

運行 Webpack ，你將看到3份 JS 文件：bundle.js, 1.bundle.js 和 vendor.bundle.js。如果愿意的話也可以運行 npm start 命令來在瀏覽器中查看結果。看起來 Webpack 甚至會把自身加載不同模塊的主要代碼放進公共庫數據塊，此舉極為實用。

至此我們結束了 example8 分支之旅，同時本篇教程也接近尾聲。我所談頗多，但僅讓你對 Webpack 的能力淺嘗輒止。Webpack 實現了更簡便的 CSS module、清緩存、圖片優化等等很多事情——多到即便書巨著一本，我也無法說窮道盡，且在我成書之前，大多數已寫的內容也將被更新替代。So，嘗試一下 Webpack 吧，且告訴我它有沒有提升工作流。祝吾主保佑，編程愉快！

iKcamp原創新書《移動Web前端高效開發實戰》已在亞馬遜、京東、當當開售。