# html-version-check-webpack-plugin

> 用于检查 SPA 中的 index.html 是否缓存，并于缓存状态时执行更新操作的 webpack plugin。如由 vue 构建的 SPA 应用。

Latest version **0.0.3** (published 2020-07-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install html-version-check-webpack-plugin
pnpm add html-version-check-webpack-plugin
yarn add html-version-check-webpack-plugin
bun add html-version-check-webpack-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2020-07-07 |
| First published | 2020-05-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | zoux |
| Maintainers | zouxin0125 |

## Links

- npm: https://www.npmjs.com/package/html-version-check-webpack-plugin
- Repository: https://github.com/zoux/html-version-check-webpack-plugin
- Homepage: https://github.com/zoux/html-version-check-webpack-plugin#readme
- Issues: https://github.com/zoux/html-version-check-webpack-plugin/issues
- npm.io page: https://npm.io/package/html-version-check-webpack-plugin

## Recent versions

- 0.0.3 (latest) — 2020-07-07
- 0.0.2 — 2020-05-08
- 0.0.1 — 2020-05-08

## README

# html-version-check-webpack-plugin

用于检查 SPA 中的 index.html 是否缓存，并于缓存状态时执行更新操作的 webpack plugin。如由 vue 构建的 SPA 应用。 


## 使用方式

#### 1 安装插件

```bash
npm i html-version-check-webpack-plugin -D
```

#### 2 引入插件

> vue.config.js 引入

```javascript
module.exports = {
  chainWebpack: config => {
    const pluginParams = { enable: true }
    config.plugin('HtmlVersionCheck').use(require('html-version-check-webpack-plugin'), [pluginParams])
  }
}
```


## plugin params 说明

* `enable` `<Boolean>` 默认值 `false` - 是否启用插件
* `version` `<String>` 默认值 `new Date().getTime()` - 生成的版本号，作为检查版本是否一致的比较值
* `htmlFileName`  `<String>` 默认值 `index.html` - 项目构建的 html 文件名，插件将会根据文件名找到 html 并写入 version
* `versionJSFileName` `<String>` 默认值 `__version__.js` - 插件生成的用于服务端存储 version 的 js 文件名


## 相关内容

### index.html 的缓存问题

前端使用 webpack 打包后文件名通过加入 hash，来保证每次 dist 的文件名不一样，来应对部署新版本后的缓存问题。

但是若 index.html 被客户端缓存的话，就可能存在新版本 dist 部署后，客户端依然在运行旧版本 dist。

### 解决方式/设计思路

1. 客户端通过 index.html meta、服务端通过一个 js 文件，一同存储当前 dist 的 version。
2. 客户端每次加载 index.html 时都会执行一个 jsonp 去获取服务端 js 文件中的 version 版本并进行比对。
3. 若新的 dist 部署后，意味着服务端 js 文件携带的 version 也发生更新。此时若客户端加载了旧的 dist index.html，则会通过 jsonp 发现 version 不一致，于是执行 `location.reload(true)` 加载新的 dist。

---
_Source: https://npm.io/package/html-version-check-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._