简介
nowa-revo 是一个 webpack 的插件，它可以将该插件打包的文件中的 js 和样式文件名加上版本号，以达到缓存效果，同时，这个插件可以生成 html 文件并替换原引用，且可以添加页面的信息。
安装
--- ------- --------- ----------
使用
在 webpack 的配置文件中，导入该插件：
----- ---- - ---------------------
在 plugins 数组中添加一个新的实例：
-------- -
--- ------
-- --
--
--选项
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| version | 数字或函数 | 时间戳 | 版本号，如果是数字则为版本号，如果是函数则为运行时调用 |
| tag | 字符串 | 'v' | 版本号前缀，方便和其他版本区分 |
| hash | 数字 | 7 | 版本号的 hash 长度 |
| exts | 数组 | ['.js', '.css'] | 需要添加版本号的文件类型 |
| basePath | 字符串 | process.cwd() | 项目路径，可以设置相对路径 |
| output | 字符串或对象 | './dist' | 打包输出路径，如果为对象，则可以通过 html 属性指定 html 输出路径 |
| pages | 数组 | [] | 页面配置，每个元素都是一个页面的信息 |
version 选项
如果您需要手动指定版本号，则可以设置 version 选项为一个数字：
--- ------ -------- - --
如果您需要运行时动态指定版本号，则可以设置该选项为一个函数：
-------- ------------ - -- ------ - ------ - --- ------ -------- ---------- --
该函数必须返回一个数字，否则将导致版本号不能正确设置。
pages 选项
使用 nowa-revo，可以为每个页面指定版本和其他信息。您可以在 pages 数组中添加每个页面的信息。每个页面的信息必须具有以下属性：
| 名称 | 类型 | 是否必需 | 描述 |
|---|---|---|---|
| name | 字符串 | 必需 | 页面名称 |
| title | 字符串 | 必需 | 页面标题 |
| template | 字符串 | 必需 | html 模板文件 |
| entry | 字符串 | 必需 | 入口 js 文件 |
| chunks | 数组 | 可选 | 需要加载的其他 js 文件 |
| variables | 对象 | 可选 | 页面所需的变量 |
每个页面的信息必须是一个对象，例如：
- ----- -------- ------ ----- --------- ------------------- ------ ----------------- ------- ------- -
variables 选项
为了让页面可以访问相关变量，您可以在 variables 选项中指定变量：
---------- - ----- --------- -
在 template 中，您可以使用 root 变量：
------- -------------------------------------------------
output 选项
如果您需要将页面生成到指定的目录，您可以在 output 选项中指定，可以指定为一个字符串，例如：
--- ------ ------- --------- --
或者作为一个对象，您可以在该对象中指定一个 html 属性，用于指定 html 文件的生成路径：
--- ------
------- -
----- ----------
----- ----
-
--完整的配置示例
在这个配置示例中，我们将所有的配置属性都放在了一起，您可以根据需要选择需要的属性：
----- ---- - ---------------------
----- ---- - ----------------
-------------- - -
------ -
---- ----------------
--
------- -
--------- ------------
----- ----------------------- -------
--
-------- -
--- ------
-------- --
--------- ----------
------- -
----- ---------
----- ----
--
------ --
----- --------
------ -----
--------- -------------------
------ -----------------
------- --------- ----------
---------- -
----- --------
-------- ------------
-
-- -
----- --------
------ -------
--------- -------------------
------ -----------------
------- --------- ---------
---------- -
----- --------
-------- -
-
--
--
-
--
-------- ------------ -
------ --------------------- - ------
-总结
nowa-revo 是一个非常有用的 webpack 插件，它可以方便的将打包后的文件名添加版本号，以达到缓存的效果，同时，该插件还可以生成 html 文件并替换原来的引用，它大大的提高了开发效率，为开发者提供了更好的开发体验。掌握这个插件的使用方法，可以在前端开发中发挥更大的作用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056d5d81e8991b448e6fe0