前端利器躬行記（4）——webpack進階

　　webpack是一個很是強大的工具，除了前文所介紹的基礎概念以外，還有各類進階應用，例如Source Map、模塊熱替換、集成等，本文會對這些內容作依次講解。

1、 runtime和manifest

　　在webpack打包生成的bundle文件中，除了業務代碼和引用的第三方庫以外，還會包含管理模塊交互的runtime和manifest。

1）runtime

　　runtime是一段輔助代碼，在模塊交互時，能鏈接它們所需的加載和解析邏輯。下面是經過webpack 4.34生成的runtime（只給出了部分代碼），定義了一個加載模塊的函數：__webpack_require__()，其參數是模塊標識符，還爲它添加了多個私有屬性。

/******/ (function(modules) {     // webpackBootstrap
/******/     // The module cache
/******/     var installedModules = {};
/******/
/******/     // The require function
/******/     function __webpack_require__(moduleId) {
/******/         // Check if module is in cache
/******/         if(installedModules[moduleId]) {
/******/             return installedModules[moduleId].exports;
/******/         }
/******/         // Create a new module (and put it into the cache)
/******/         var module = installedModules[moduleId] = {
/******/             i: moduleId,
/******/             l: false,
/******/             exports: {}
/******/         };
/******/         // Execute the module function
/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/         // Flag the module as loaded
/******/         module.l = true;
/******/         // Return the exports of the module
/******/         return module.exports;
/******/     }
/******/
/******/     // expose the modules object (__webpack_modules__)
/******/     __webpack_require__.m = modules;
/******/
/******/     // expose the module cache
/******/     __webpack_require__.c = installedModules;
/******/
/******/     // Load entry module and return exports
/******/     return __webpack_require__(__webpack_require__.s = 0);
/******/ })

　　注意，在編寫的源碼中所使用的import、define()或require()等模塊導入語法，都會被轉換成__webpack_require__()函數。

　　若是在webpack.config.js中配置optimization.runtimeChunk爲true（以下所示），那麼就能將runtime提取到一個單獨的文件中。

module.exports = {
  optimization: {
    runtimeChunk: true
  }
};

2）manifest

　　這是一組數據，記錄了模塊和bundle文件之間的映射關係。runtime藉助manifest可以查詢到模塊標識符，檢索出對應的模塊。若是要查看manifest中記錄的chunk信息，那麼須要先安裝webpack-manifest-plugin，命令以下所示。

npm install --save-dev webpack-manifest-plugin

　　而後將此插件添加到webpack.config.js中，以下所示。

var ManifestPlugin = require('webpack-manifest-plugin');
module.exports = {
  entry: {
    index: "./index.js",
    list: "./list.js"
  },
  output: {
    filename: "[name].bundle.js"
  },
  plugins: [
    new ManifestPlugin()
  ]
};

　　最後在執行打包命令的時候，就會生成一個manifest.json文件，其內容以下所示。

{
  "index.js": "index.bundle.js",
  "list.js": "list.bundle.js"
}

2、Source Map

　　webpack會先對源文件進行合併、編譯、壓縮等處理，而後再打包生成bundle文件，從而就難以追蹤錯誤或警告在源文件中的原始位置，很是不利於調試。Source Map就是爲解決調試的矛盾點而生的，它能在源文件和bundle文件之間創建位置映射，即將字符的新舊兩個位置對應起來，這樣就能鎖定錯誤或警告的出處。

1）devtool

　　要在webpack中開啓Source Map，只需在配置文件中添加devtool字段，以下所示。

module.exports = {
  entry: {
    index: "./index.js"
  },
  output: {
    filename: "[name].bundle.js"
  },
  devtool: "inline-source-map"
};

　　當devtool的值爲inline-source-map時，在生成的bundle文件的末尾就會附加一段Data URI格式的Source Map信息，以下所示。

//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJz......

　　此時在index.js文件中添加打印和會引發錯誤的代碼（以下所示），刷新引用index.bundle.js文件的頁面，在控制檯看到的將是圖2所示的信息。

console.log("index.js");
console.log(a);

圖2  index.js文件中的打印和錯誤信息

　　devtool字段可選的關鍵字多達13個，要想了解其中的細節，可參考官方文檔。

2）文件格式

　　Source Map保存的信息會隨着模塊的變多而變大，爲了不bundle文件的內容過於臃腫，有必要將其獨立出來。在devtool可選的關鍵字中，有一個source-map，可生成一個專門記錄Source Map信息的文件，其後綴爲「.map」。如下面的配置爲例，會生成一個index.bundle.js.map文件。

module.exports = {
  entry: {
    index: "./index.js"
  },
  output: {
    filename: "[name].bundle.js"
  },
  devtool: "source-map"
};

　　經過source-map生成的bundle文件只會附加一條指向Source Map文件的語句，以下所示。

//# sourceMappingURL=index.bundle.js.map

　　index.bundle.js.map文件保存的是一個JSON格式的對象，其結構以下所示。

{
  "version": 3,
  "sources": ["webpack:///webpack/bootstrap", "webpack:///./index.js"],
  "names": ["console", "log", "a"],
  "mappings": "yCAAiC,eAAe;AAChD......",
  "file": "index.bundle.js",
  "sourcesContent": [" \t// The module cache\n ....."],
  "sourceRoot": ""
}

　　每一個屬性的說明以下所列：

（1）version：Source Map的版本，目前爲3。

（2）sources：一個由源文件組成的數組。

（3）names：一個由源文件中的變量名和屬性名組成的數組，須要通過編譯、壓縮等處理後才能獲得。

（4）mappings：一段通過了Base64和VLQ編碼的字符串，記錄了位置的映射關係。

（5）file：bundle文件的名稱。

（6）sourcesContent：一個由源文件內容組成的數組，其元素順序和sources中的相同。

（7）sourceRoot：源文件所在的目錄，若是與bundle文件處在同一目錄，那麼該項爲空。

3、webpack-dev-server

　　webpack-dev-server搭建了一個基於Node.js的本地服務器，可以實時編譯，而且在瀏覽器和服務器之間創建了一個websocket長鏈接，從而就能自動加載頁面了，其安裝命令以下所示。

npm install --save-dev webpack-dev-server

　　修改webpack.config.js文件，增長devServer字段（以下配置所示），其contentBase屬性用於定義服務器可訪問的目錄。

module.exports = {
  entry: {
    index: "./index.js"
  },
  output: {
    filename: "[name].bundle.js"
  },
  devServer:  {
    contentBase: "./dist"
  }
};

　　下面的命令會開啓本地服務器，並打開默認的瀏覽器。在地址欄輸入http://localhost:8080/後，就能訪問到dist目錄下的文件了。

npx webpack-dev-server --open

　　假設在配置文件的同級目錄中有個index.js文件，一旦修改它的代碼，在終端就會顯示一長串的編譯和加載的提示，以下所示（只給出了部份內容）。

i wdm: Compiling...
i wdm: Hash: 37e4296852feeec48286
Version: webpack 4.34.0
Time: 149ms
Built at: 2019-06-21 11:10:47 AM
          Asset      Size   Chunks               Chunk Names
index.bundle.js   335 KiB       0     [emitted]  index
Entrypoint index = index.bundle.js
 [0] multi ../node_modules/webpack-dev-server/client?http://localhost ./index.js 40 bytes {0} [built]
 [1] ../node_modules/webpack-dev-server/client?http://localhost 4.29 KiB {0} [built]
     ......
[30] ../node_modules/webpack/hot sync nonrecursive ^\.\/log$ 170 bytes {0} [built]
[32] ./index.js 29 bytes {0} [built]
    + 18 hidden modules
i wdm: Compiled successfully.

　　若是不想實時加載頁面，那麼能夠將inline屬性設爲false，以下所示，devServer字段還有許多其它的屬性，例如https、compress、hot等，可參考官方文檔。

module.exports = {
  devServer:  {
    inline: false
  }
};

　　注意，因爲通過webpack-dev-server實時編譯的文件都保存在了內存中，所以輸出目錄內的bundle文件的內容並不會實時更新。這麼作既能快速的讀取代碼，也能下降寫入文件的開銷。

4、模塊熱替換

　　模塊熱替換（Hot Module Replacement，HMR）能在程序運行時替換、新增或刪除模塊，而無需加載整個頁面（即不刷新窗口），其效果相似於在Chrome瀏覽器的調試器中直接更改樣式。

　　若是要開啓模塊熱替換，那麼首先要在webpack.config.js中爲webpack-dev-server配置hot字段爲true（以下所示），啓用模塊的熱替換特性。

module.exports = {
  devServer:  {
    hot: true
  }
};

　　而後在配置文件中，添加HotModuleReplacementPlugin插件，以下所示。

const webpack = require('webpack');
module.exports = {
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

　　若是要更新的是JavaScript模塊，那麼還須要在模塊中添加module.hot.accept()方法（以下所示），讓模塊變得可更新。

if (module.hot) {
  module.hot.accept();
}

　　accept()方法能接收2個可選的參數，第一個是依賴模塊的路徑（字符串或數組），第二個是模塊更新後所觸發的回調函數。下面用一個例子來演示模塊熱替換，首先建立一個HTML文件：index.html，並在其中聲明一個按鈕，以下所示。

<button id="btn">提交</button>

　　而後建立兩個JavaScript文件：index.js和list.js，其中index.js引入了list.js文件，而且爲按鈕註冊了點擊事件，還調用了module.hot.accept()方法，以下所示。

require("./list.js");
document.getElementById("btn").addEventListener("click", function() {
    this.style.color = "red";
  },
  false
);
if (module.hot) {
  module.hot.accept("./list.js", function() {
    console.log("update");
  });
}

　　當點擊頁面中的按鈕後，按鈕的字體顏色就會變紅。此時修改list.js中的代碼，就會觸發模塊熱替換，保持頁面狀態（即維持按鈕的字體顏色），並在控制檯打印出「update」。

5、代碼分離

　　代碼分離（Code Splitting）能將代碼拆成多塊，分離到不一樣的bundle中，這些文件既能按需加載，也能被瀏覽器緩存。不只如此，代碼分離還能去除重複代碼，減小文件體積，優化加載時間。

　　代碼分離的方法有三種，分別是入口起點（Entry Point）、防止重複（Prevent Duplication）和動態導入（Dynamic Import），其中入口起點在基礎篇中曾提到過，就是在配置文件的entry中聲明多個入口，而另外兩個方法將在下文作重點講解。

1）防止重複 

　　CommonsChunkPlugin是一個能將公共模塊提取到一個入口或新生成的chunk中，即分離業務邏輯和依賴庫，防止出現重複代碼。不過從webpack 4開始，棄用了此插件，讓SplitChunksPlugin替代了它。

　　接下來用一個例子來演示SplitChunksPlugin的用法，首先建立兩個文件：index.js和list.js，它們都導入了第三方庫lodash，以下代碼所示。若是沒有將依賴的lodash提取出來，那麼二者生成的bundle文件都會包含lodash。

import _ from "lodash";

　　而後在配置文件中聲明入口、輸出以及optimization.splitChunks，以下所示。

module.exports = {
  entry: {
    index: "./index.js",
    list: "./list.js"
  },
  output: {
    filename: "[name].bundle.js"
  },
  optimization: {
    splitChunks: {
      chunks: "all"
    }
  }
};

　　配置中的chunks參數可指定所要提取的模塊，有三個關鍵字可供選擇：initial、async和all，分別表示初始加載、按需加載和兩種狀況的模塊。在執行打包命令後，會生成三個bundle文件，其中只有vendors~index~list.bundle.js會包含lodash。

2）動態導入

　　在webpack中，可經過ES6標準的import()語法實現動態的拆分代碼，而webpack首創的require.ensure()方法已被其取代。下面是一個動態導入的例子，其中import()函數會返回一個Promise對象，調用的語句被放到了一個函數中，這些代碼被記錄在detail.js中。

function getChunk() {
  import(
    /* webpackChunkName: "lodash" */
    "lodash"
  ).then(_ => {});
}

　　在函數參數的註釋中使用了webpackChunkName，用於指定bundle文件的名稱，即生成lodash.bundle.js而不是[id].bundle.js。注意，在配置文件中還要指定chunkFilename字段，聲明非入口的chunk所生成的bundle名稱，以下所示。

module.exports = {
  entry: {
    detail: "./detail.js"
  },
  output: {
    filename: "[name].bundle.js",
    chunkFilename: "[name].bundle.js"
  }
};

　　在執行打包命令後，會生成兩個bundle文件，其中只有vendors~lodash.bundle.js會包含lodash。

3）懶加載

　　以前動態分離出的bundle文件，可經過頁面中的交互將其懶加載，例如把import()函數放到按鈕點擊事件中，以下所示。

document.getElementById("btn").addEventListener("click", function() {
    import(
      /* webpackChunkName: "lodash" */
      "lodash"
    ).then(_ => {});
  },
  false
);

　　webpack.config.js中的配置與動態導入中的相似，只是要加一個publicPath參數，爲懶加載的bundle文件指定路徑前綴，以避免沒法讀取。

module.exports = {
  output: {
    publicPath: "./dist/"
  }
};

6、集成Gulp

　　Gulp是一款基於Node.js的前端自動化任務執行器，可經過它構建出自動化的工做流程，例如測試、檢查等，從而提升開發效率和工做質量。在webpack-stream的幫助下，能夠很方便地將Gulp與webpack集成在一塊兒。

　　首先將Gulp安裝到全局，而後再將webpack-stream安裝到開發環境中，以下所示。

npm install -g gulp 
npm install --save-dev webpack-stream

　　接着在Gulp的配置文件gulpfile.js中引入gulp和webpack-stream，聲明要匹配的文件以及輸出目錄（以下所示），而在webpack()函數中，就能傳入webpack的配置信息。

var gulp = require("gulp"),
  webpack = require("webpack-stream");
gulp.task("webpack", function() {
  return gulp.src("./js/*.js").pipe(
      webpack({
        //配置信息
      })
    ).pipe(gulp.dest("dist/"));
});