介绍
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