npm 包 webpack-digest 使用教程

阅读时长 5 分钟读完

介绍

webpack-digest 是一个可以帮助使用者自动生成 Webpack 构建的输出结果的 npm 包。它可以在一个普通的 JavaScript 对象中计算所有模块的生成文件名和内容的散列值,并提供一份可读的摘要信息。

如果你在使用 Webpack 进行构建,并需要在每次构建后手动验证文件是否不同,那么 webpack-digest 是非常适合你的工具。

安装

首先,你需要将 webpack-digest 添加到你的依赖列表中:

配置

webpack-digest 需要的配置非常简单。在你的 Webpack 配置文件中添加如下代码:

-- -------------------- ---- -------
----- ------------------- - ---------------------------------

----- ------ - -
  -- --- ------- ---

  -------- -
    --- ---------------------
      ------- ----------------
    --
  --
--

你可以将 output 配置为任意的文件名。webpack-digest 会在构建结束后,将计算出的散列值输出到指定文件中。

使用

在 Webpack 构建完成之后,你可以使用以下 JavaScript 代码读取输出文件的内容:

输出的内容将具有如下形式:

-- -------------------- ---- -------
-
  ------ -
    ------- -----------------------
    ------------ -
      ----- -
        ---------- ----- ------- ---- ------- -- --- ---- ------
      -
    -
  --
  -------------- -
    ------- -----------------------
    ------------ -
      ----- -
        ------------------ ----- ------- ---- ------- -- --- ------- ------
      -
    -
  -
-

我们可以从这个信息中读取出各个模块生成的输出文件名,以及它们的 hash 值。如果这个 hash 值和以前的构建结果不同,那么代表着输出文件也必定不同。

示例代码

我们这里提供一个完整的 Webpack 配置文件,供你参考:

-- -------------------- ---- -------
----- ------------------- - ---------------------------------
----- ---- - ----------------

----- ------ - -
  ------ -
    ---- -------------
    -------- --------- ------------
  --

  -------- --------------------------

  ------- -
    ----- -------------------- --------
    --------- -------------------
  --

  ------------- -
    ------------ -
      ------- ------
      ----- ----------
    --
  --

  -------- -
    --- ---------------------
      ------- ----------------
    --
  --
--

-------------- - -------

在这份配置文件中,我们将一个入口文件拆分了成 2 个模块:app 和 vendors。其中 vendors 依赖了 React 和 ReactDOM 两个包,它们在 splitChunks 配置中被打包到了同一个文件中。

在每次构建结束后,我们会将输出文件的 hash 值和文件名,通过 webpack-digest 计算出来并写到一个 JSON 文件中。最后,我们可以通过读取这个 JSON 文件来检查输出文件有没有被正确地生成。

在这个示例中,我们认为 bundles.json 文件应该具有如下的内容:

-- -------------------- ---- -------
-
  ------ -
    ------- -----------------------
    ------------ -
      ----- -
        ------------------------------ ----- ------- ---- ------- -- --- --- ------
      -
    -
  --
  -------------- -
    ------- -----------------------
    ------------ -
      ----- -
        -------------------------------------- ----- ------- ---- ------- -- --- ------- ------
      -
    -
  -
-

如果你在命令行中输入以下命令:

那么 Webpack 就会以 production 模式编译你的代码,并生成一个 bundles.json 文件。你可以通过以上的「使用」章节中的代码来读取这个文件内容,并检查输出文件有没有被正确地生成。

总结

webpack-digest 是一个非常实用的 npm 包。在使用 Webpack 进行构建并且需要手动验证文件是否正确生成的时候,它可以节省大量的时间和精力。同时,由于它提供了源码级别的 hash 值,我们可以更加精确地检查我们的输出文件是否正确生成。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600671038dd3466f61ffdc5c

纠错
反馈