npm 包 nowa-revo 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

nowa-revo 是一个 webpack 的插件，它可以将该插件打包的文件中的 js 和样式文件名加上版本号，以达到缓存效果，同时，这个插件可以生成 html 文件并替换原引用，且可以添加页面的信息。

安装

npm install nowa-revo --save-dev

使用

在 webpack 的配置文件中，导入该插件：

const revo = require('nowa-revo');

在 plugins 数组中添加一个新的实例：

plugins: [
  new revo({
    // 选项
  })
],

选项

名称	类型	默认值	描述
version	数字或函数	时间戳	版本号，如果是数字则为版本号，如果是函数则为运行时调用
tag	字符串	'v'	版本号前缀，方便和其他版本区分
hash	数字	7	版本号的 hash 长度
exts	数组	['.js', '.css']	需要添加版本号的文件类型
basePath	字符串	process.cwd()	项目路径，可以设置相对路径
output	字符串或对象	'./dist'	打包输出路径，如果为对象，则可以通过 `html` 属性指定 html 输出路径
pages	数组	[]	页面配置，每个元素都是一个页面的信息

version 选项

如果您需要手动指定版本号，则可以设置 version 选项为一个数字：

new revo({
  version: 1
})

如果您需要运行时动态指定版本号，则可以设置该选项为一个函数：

function getVersion() {
  // return a number
}

new revo({
  version: getVersion
})

该函数必须返回一个数字，否则将导致版本号不能正确设置。

pages 选项

使用 nowa-revo，可以为每个页面指定版本和其他信息。您可以在 pages 数组中添加每个页面的信息。每个页面的信息必须具有以下属性：

名称	类型	是否必需	描述
name	字符串	必需	页面名称
title	字符串	必需	页面标题
template	字符串	必需	html 模板文件
entry	字符串	必需	入口 js 文件
chunks	数组	可选	需要加载的其他 js 文件
variables	对象	可选	页面所需的变量

每个页面的信息必须是一个对象，例如：

{
  name: 'index',
  title: '首页',
  template: './src/index.html',
  entry: './src/index.js',
  chunks: ['vue']
}

variables 选项

为了让页面可以访问相关变量，您可以在 variables 选项中指定变量：

variables: {
  root: __dirname
}

在 template 中，您可以使用 root 变量：

<script src="{{root}}/src/vue.js?v={{version}}"></script>

output 选项

如果您需要将页面生成到指定的目录，您可以在 output 选项中指定，可以指定为一个字符串，例如：

new revo({
  output: './build'
})

或者作为一个对象，您可以在该对象中指定一个 html 属性，用于指定 html 文件的生成路径：

new revo({
  output: {
    path: './build',
    html: './'
  }
})

完整的配置示例

在这个配置示例中，我们将所有的配置属性都放在了一起，您可以根据需要选择需要的属性：

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

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

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

总结

nowa-revo 是一个非常有用的 webpack 插件，它可以方便的将打包后的文件名添加版本号，以达到缓存的效果，同时，该插件还可以生成 html 文件并替换原来的引用，它大大的提高了开发效率，为开发者提供了更好的开发体验。掌握这个插件的使用方法，可以在前端开发中发挥更大的作用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60056d5d81e8991b448e6fe0