npm 包 revsion-manifest-webpack-plugin 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 revsion-manifest-webpack-plugin 使用教程

前言

当我们进行前端开发时，经常需要解决文件版本控制的问题，以便于在更新文件时，能够得知哪些文件需要更新。解决这个问题的一个常见方式是通过生成文件映射表，即将文件名与文件的版本号进行关联，以此来控制文件版本的更新。

在 webpack 中，有一个比较好用的插件叫做 revsion-manifest-webpack-plugin，它可以帮助我们生成文件映射表，方便我们进行文件版本控制。本文将介绍如何使用该插件。

安装和使用

安装

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

在 webpack 配置文件中添加插件

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

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

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

revsion-manifest-webpack-plugin 的 API 非常简单，只有一个参数对象，我们来看一下每个参数的含义。

fileName: 生成的映射表的文件名，默认为 manifest.json。
rootAssetPath: 文件的根路径，默认为空字符串。
ignorePaths: 忽略的文件夹路径数组，默认为空数组。
ignoreExtensions: 忽略的文件扩展名数组，默认为空数组。

rootAssetPath 参数的作用是将配置的路径作为相对路径的根。例如，如果我们配置 rootAssetPath 为 /static/，则文件的相对路径会从 /static/ 开始算。

ignorePaths 和 ignoreExtensions 参数的作用是控制哪些文件不需要生成映射表。

在 HTML 文件中引入映射表

我们需要在 HTML 文件中引入生成的映射表，并将文件的相对路径转换成映射表中的对应路径。代码如下：

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

在 HTML 中，我们使用了 HtmlWebpackPlugin 插件提供的 htmlWebpackPlugin.files 对象，其包含了映射表和当前代码块的入口文件路径等信息。

启动 webpack

现在我们可以启动 webpack 进行打包了。打包完成后，在指定的生成文件夹下会生成 manifest.json 文件。

例如，我们可以将 webpack 配置文件中的输出路径配置为 dist 文件夹，那么映射表的路径就是 dist/manifest.json。

使用映射表

我们可以通过加载 manifest.json，来获取文件的版本号。

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

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

我们需要在代码中手动地将文件名替换成对应的带有版本号的路径。

示例

下面是一个完整的 webpack 配置文件，以及使用 revsion-manifest-webpack-plugin 的示例。我们假设需要生成具有版本号的静态资源文件名。

webpack.config.js：

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

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

public/index.html:

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

src/index.js：

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

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

总结

revsion-manifest-webpack-plugin 可以让我们非常方便地生成文件映射表，从而方便地控制文件版本控制。当我们在进行项目开发中遇到该问题时，可以考虑使用该插件。

在使用时，需要注意配置正确的参数，以确保生成的映射表能够正确地引用到项目中的文件。

希望这篇文章能够帮助你更好地使用 revsion-manifest-webpack-plugin，进行前端开发。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/6005548b81e8991b448d1d02