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

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

懶加載（lazy-loading）模塊是我在 RequireJS 中用得舒適但在 Browserify 中難以工作的模塊。一個(gè)頗具規(guī)模的 JS 文件固然可以從減少網(wǎng)絡(luò)請(qǐng)求中受益，但也幾乎坐實(shí)了在一次會(huì)話(huà)中，某些用戶(hù)不必用到的代碼會(huì)被下載下來(lái)。

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

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

require.ensure 需要確保模塊是可用的（但并非運(yùn)行模塊），然后傳入一個(gè)由模塊名構(gòu)成的數(shù)組，接著傳入一個(gè)回調(diào)函數(shù)（callback）。真正想要在回調(diào)函數(shù)里使用模塊，你需要顯式 require 數(shù)組里傳入的相應(yīng)模塊。

私以為這種方式相麻煩，所以，我們來(lái)看 AMD 的寫(xiě)法。

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

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

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

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

運(yùn)行 npm start ，你會(huì)發(fā)現(xiàn)生成了另外一個(gè)名為 1.bundle.js 的資源文件（asset）。在瀏覽器打開(kāi)該頁(yè)面，然后在開(kāi)發(fā)者工具中監(jiān)聽(tīng)網(wǎng)絡(luò)流量，2秒之后你會(huì)發(fā)現(xiàn)新的資源文件最終被加載并且運(yùn)行了。以上這些實(shí)現(xiàn)起來(lái)并不困難，但提升用戶(hù)體驗(yàn)可不止一點(diǎn)。

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

我們?cè)僬f(shuō)一個(gè)優(yōu)化的點(diǎn)：公共庫(kù)數(shù)據(jù)塊。你可以定義一個(gè)多帶帶用以打包的 bundle，該 bundle 中存放不常改動(dòng)的 “common” 庫(kù)或第三方代碼。該策略可使用戶(hù)獨(dú)立緩存你的公共庫(kù)文件，以區(qū)別于業(yè)務(wù)代碼，以便在你迭代應(yīng)用時(shí)讓用戶(hù)無(wú)需重新下載該庫(kù)文件。

為此，我們使用 Webpack 官方插件：CommonsChunkPlugin。它已附帶在 Webpack 中，所以我們無(wú)需安裝。僅對(duì) 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"
        })
    ]
};

我們?cè)诘谌幸朐摬寮?。此后，?entry 部分修改配置，將其換成了一個(gè)對(duì)象字面量（literal），用以指定多入口。vendor 入口記錄了會(huì)在公共庫(kù)數(shù)據(jù)塊中——這里包含了 polyfill 和 Lodash ——被引入的庫(kù)并將我們的主要入口放置在 main 入口里。接著，我們僅需將 CommonsChunkPlugin 添加到 plugins 部分，指定 “vendor” 數(shù)據(jù)塊作為該插件生成數(shù)據(jù)塊的索引，同時(shí)指定 vendor.bundle.js 文件用以存放公共庫(kù)代碼（譯者注：這里插件配置中的 name: "vendor" 對(duì)應(yīng) entry 中的 vendor 入口，入口數(shù)組中指定的依賴(lài)模塊即最終存放于 vendor.bundle.js 文件中的依賴(lài)模塊）。

通過(guò)指定 “vendor” 數(shù)據(jù)塊，該插件將拉取此數(shù)據(jù)塊所有的依賴(lài)模塊，并將其存放于公共庫(kù)數(shù)據(jù)塊內(nèi)，這些依賴(lài)模塊在一個(gè)多帶帶入口文件里被指定。如果不在入口對(duì)象字面量中指定數(shù)據(jù)塊名，插件會(huì)基于多入口文件之間公用的依賴(lài)模塊來(lái)生成獨(dú)立文件。

運(yùn)行 Webpack ，你將看到3份 JS 文件：bundle.js, 1.bundle.js 和 vendor.bundle.js。如果愿意的話(huà)也可以運(yùn)行 npm start 命令來(lái)在瀏覽器中查看結(jié)果。看起來(lái) Webpack 甚至?xí)炎陨砑虞d不同模塊的主要代碼放進(jìn)公共庫(kù)數(shù)據(jù)塊，此舉極為實(shí)用。

至此我們結(jié)束了 example8 分支之旅，同時(shí)本篇教程也接近尾聲。我所談?lì)H多，但僅讓你對(duì) Webpack 的能力淺嘗輒止。Webpack 實(shí)現(xiàn)了更簡(jiǎn)便的 CSS module、清緩存、圖片優(yōu)化等等很多事情——多到即便書(shū)巨著一本，我也無(wú)法說(shuō)窮道盡，且在我成書(shū)之前，大多數(shù)已寫(xiě)的內(nèi)容也將被更新替代。So，嘗試一下 Webpack 吧，且告訴我它有沒(méi)有提升工作流。祝吾主保佑，編程愉快！

iKcamp原創(chuàng)新書(shū)《移動(dòng)Web前端高效開(kāi)發(fā)實(shí)戰(zhàn)》已在亞馬遜、京東、當(dāng)當(dāng)開(kāi)售。