## Manifest 在使用 webpack 構建的典型應用程序或站點中，有三種主要的代碼類型： 1. 你或你的團隊編寫的源碼。 2. 你的源碼會依賴的任何第三方的 library 或 "vendor" 代碼。 3. webpack 的 runtime 和 *manifest*，管理所有模塊的交互。 本文將重點介紹這三個部分中的最后部分，runtime 和 manifest。 ## Runtime 如上所述，我們這里只簡略地介紹一下。runtime，以及伴隨的 manifest 數據，主要是指：在瀏覽器運行時，webpack 用來連接模塊化的應用程序的所有代碼。runtime 包含：在模塊交互時，連接模塊所需的加載和解析邏輯。包括瀏覽器中的已加載模塊的連接，以及懶加載模塊的執行邏輯。 ## Manifest 那么，一旦你的應用程序中，形如 `index.html` 文件、一些 bundle 和各種資源加載到瀏覽器中，會發生什么？你精心安排的 `/src` 目錄的文件結構現在已經不存在，所以 webpack 如何管理所有模塊之間的交互呢？這就是 manifest 數據用途的由來…… 當編譯器(compiler)開始執行、解析和映射應用程序時，它會保留所有模塊的詳細要點。這個數據集合稱為 "Manifest"，當完成打包并發送到瀏覽器時，會在運行時通過 Manifest 來解析和加載模塊。無論你選擇哪種[模塊語法](https://doc.webpack-china.org/api/module-methods)，那些 `import` 或 `require` 語句現在都已經轉換為 `__webpack_require__` 方法，此方法指向模塊標識符(module identifier)。通過使用 manifest 中的數據，runtime 將能夠查詢模塊標識符，檢索出背后對應的模塊。 webpack及其插件似乎“知道”應該哪些文件生成。答案是，通過 manifest，webpack 能夠對「你的模塊映射到輸出 bundle 的過程」保持追蹤。 通過使用 [`WebpackManifestPlugin`](https://github.com/danethurber/webpack-manifest-plugin)，可以直接將數據提取到一個 json 文件，以供使用。 ## WebpackManifestPlugin ### 安裝 ``` yarn add webpack-manifest-plugin --dev ``` ### 使用 ```js const ManifestPlugin = require('webpack-manifest-plugin'); module.exports = { // ... plugins: [ new CleanWebpackPlugin(['dist'], { root: path.resolve(__dirname, '..'), exclude: ['manifest.json'], verbose: true, dry: false }), new ManifestPlugin() ] }; ``` 這將會輸出一個名為 `manifest.json ` 的文件，以跟蹤生成的文件。