前端利器躬行記（4）——webpack進階
- 2019 年 10 月 3 日
- 筆記
webpack是一個非常強大的工具，除了前文所介紹的基礎概念之外，還有各種進階應用，例如Source Map、模組熱替換、集成等，本文會對這些內容做依次講解。
一、 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" }
二、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 cachen ....."], "sourceRoot": "" }
每個屬性的說明如下所列：
（1）version：Source Map的版本，目前為3。
（2）sources：一個由源文件組成的數組。
（3）names：一個由源文件中的變數名和屬性名組成的數組，需要經過編譯、壓縮等處理後才能得到。
（4）mappings：一段經過了Base64和VLQ編碼的字元串，記錄了位置的映射關係。
（5）file：bundle文件的名稱。
（6）sourcesContent：一個由源文件內容組成的數組，其元素順序和sources中的相同。
（7）sourceRoot：源文件所在的目錄，如果與bundle文件處在同一目錄，那麼該項為空。
三、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文件的內容並不會實時更新。這麼做既能快速的讀取程式碼，也能降低寫入文件的開銷。
四、模組熱替換
模組熱替換（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”。
五、程式碼分離
程式碼分離（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/" } };
六、集成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/")); });