介绍
webpack-digest 是一个可以帮助使用者自动生成 Webpack 构建的输出结果的 npm 包。它可以在一个普通的 JavaScript 对象中计算所有模块的生成文件名和内容的散列值，并提供一份可读的摘要信息。
如果你在使用 Webpack 进行构建，并需要在每次构建后手动验证文件是否不同，那么 webpack-digest 是非常适合你的工具。
安装
首先，你需要将 webpack-digest 添加到你的依赖列表中：
npm install webpack-digest --save-dev
配置
webpack-digest 需要的配置非常简单。在你的 Webpack 配置文件中添加如下代码：
-- -------------------- ---- -------
----- ------------------- - ---------------------------------
----- ------ - -
-- --- ------- ---
-------- -
--- ---------------------
------- ----------------
--
--
--你可以将 output 配置为任意的文件名。webpack-digest 会在构建结束后，将计算出的散列值输出到指定文件中。
使用
在 Webpack 构建完成之后，你可以使用以下 JavaScript 代码读取输出文件的内容：
const fs = require('fs');
const path = require('path');
const filePath = path.join(__dirname, 'bundles.json');
const content = fs.readFileSync(filePath, 'utf8');
const data = JSON.parse(content);
console.log(data);输出的内容将具有如下形式：
-- -------------------- ---- -------
-
------ -
------- -----------------------
------------ -
----- -
---------- ----- ------- ---- ------- -- --- ---- ------
-
-
--
-------------- -
------- -----------------------
------------ -
----- -
------------------ ----- ------- ---- ------- -- --- ------- ------
-
-
-
-我们可以从这个信息中读取出各个模块生成的输出文件名，以及它们的 hash 值。如果这个 hash 值和以前的构建结果不同，那么代表着输出文件也必定不同。
示例代码
我们这里提供一个完整的 Webpack 配置文件，供你参考：
-- -------------------- ---- -------
----- ------------------- - ---------------------------------
----- ---- - ----------------
----- ------ - -
------ -
---- -------------
-------- --------- ------------
--
-------- --------------------------
------- -
----- -------------------- --------
--------- -------------------
--
------------- -
------------ -
------- ------
----- ----------
--
--
-------- -
--- ---------------------
------- ----------------
--
--
--
-------------- - -------在这份配置文件中，我们将一个入口文件拆分了成 2 个模块：app 和 vendors。其中 vendors 依赖了 React 和 ReactDOM 两个包，它们在 splitChunks 配置中被打包到了同一个文件中。
在每次构建结束后，我们会将输出文件的 hash 值和文件名，通过 webpack-digest 计算出来并写到一个 JSON 文件中。最后，我们可以通过读取这个 JSON 文件来检查输出文件有没有被正确地生成。
在这个示例中，我们认为 bundles.json 文件应该具有如下的内容：
-- -------------------- ---- -------
-
------ -
------- -----------------------
------------ -
----- -
------------------------------ ----- ------- ---- ------- -- --- --- ------
-
-
--
-------------- -
------- -----------------------
------------ -
----- -
-------------------------------------- ----- ------- ---- ------- -- --- ------- ------
-
-
-
-如果你在命令行中输入以下命令：
$ NODE_ENV=production webpack --config my.config.js
那么 Webpack 就会以 production 模式编译你的代码，并生成一个 bundles.json 文件。你可以通过以上的「使用」章节中的代码来读取这个文件内容，并检查输出文件有没有被正确地生成。
总结
webpack-digest 是一个非常实用的 npm 包。在使用 Webpack 进行构建并且需要手动验证文件是否正确生成的时候，它可以节省大量的时间和精力。同时，由于它提供了源码级别的 hash 值，我们可以更加精确地检查我们的输出文件是否正确生成。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671038dd3466f61ffdc5c
