# add-static-cache-webpack-plugin

> add static HTML5 cache file in yours project

Latest version **0.1.6** (published 2017-07-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install add-static-cache-webpack-plugin
pnpm add add-static-cache-webpack-plugin
yarn add add-static-cache-webpack-plugin
bun add add-static-cache-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.1.6 |
| Published | 2017-07-12 |
| First published | 2017-07-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Jinke.Li |
| Maintainers | jinke.li |
| Keywords | webpack, plugin, cache, static, manifest, html5 |

## Links

- npm: https://www.npmjs.com/package/add-static-cache-webpack-plugin
- Repository: https://github.com/lijinke666/add-static-cache-webpack-plugin
- Homepage: https://github.com/lijinke666/add-static-cache-webpack-plugin#readme
- Issues: https://github.com/lijinke666/add-static-cache-webpack-plugin/issues
- npm.io page: https://npm.io/package/add-static-cache-webpack-plugin

## Alternatives

- [memory-cache](https://npm.io/package/memory-cache.md) — 795.0K weekly downloads
- [@httptoolkit/proxy-agent](https://npm.io/package/@httptoolkit/proxy-agent.md) — 11.2K weekly downloads
- [express-cache-controller](https://npm.io/package/express-cache-controller.md) — 5.3K weekly downloads
- [http-cache-middleware](https://npm.io/package/http-cache-middleware.md) — 4.5K weekly downloads
- [cache2](https://npm.io/package/cache2.md) — 1.5K weekly downloads

## Recent versions

- 0.1.6 (latest) — 2017-07-12
- 0.1.5 — 2017-07-11
- 0.1.4 — 2017-07-10
- 0.1.3 — 2017-07-10
- 0.1.2 — 2017-07-10
- 0.1.1 — 2017-07-10
- 0.0.8 — 2017-07-10
- 0.0.7 — 2017-07-10
- 0.0.6 — 2017-07-10
- 0.0.5 — 2017-07-10
- 0.0.4 — 2017-07-10
- 0.0.3 — 2017-07-10
- 0.0.2 — 2017-07-10
- 0.0.1 — 2017-07-10

## README

# add-static-cache-webpack-plugin
add static cache manifest  file in yours project , webpack build after create HTML5 Cache Manifest File , add your css,image,fonts in this cahce file 

## Installation
```
npm install add-static-cache-webpack-plugin --save-dev
```
### How to Use ?

- webpack.config.js
```javascript
const AddStaticCachePlugin = require('add-static-cache-webpack-plugin')

...

module.exports = {
  ...
  plugins: [
    new AddStaticCachePlugin({
      tempalte:"",                    // Not required Default template  See the instructions below
      cacheName:"jinke.appcache",     // Not required Default `app.appcache`
      comments:"I am commnets",       // Not required Default `add static cache webpack plugin appCache`
      publicPath:"/"                  // Not required Default create temp file in your `webpack.config.js` `output options publicPath`
    })
  ]
};
```

### options
--- 
- #### template
  - type : `String`
  - default : `{DEFAULT TEMP FILE}`
- #### cacheName
  - type : `String`
  - default : `'app.appcache'`
- #### comments
  - type : `String`
  - default : `'add static cache webpack plugin appCache'`
- #### publicPath
  - type : `String`
  - default : ""
  
 ---
 
 ### DEFAULT TEMP FILE
 ```
     const defaultTpl = ` 
          CACHE MANIFEST
          # add static cache webpack plugin appCache
          # {date}
          {cssPath}
          {fontsPath}
          {imagesPath}
          {jsPath}


          NETWORK:
          *
    `
 ```

 ### temp placeholder
 - ##### {date}
 - ##### {cssPath}
 - ##### {jsPath}
 - ##### {fontsPath}
 - ##### {comments}
 
 ### if your want custom template like
 `mkdir my.tpl`
 ```
   CACHE MANIFEST
  # {comments}
  # {date}
  {cssPath}
  {fontsPath}
  {jsPath}
  {imagesPath}

  NETWORK:
  *

  FALLBACK
  # feestyle
  /static/ /404.html
  
 ```
 #### Then
 
 ```javascript
     new AddStaticCachePlugin({
      tempalte:"./my.tpl",                    // Not required Default template  See the instructions below
      cacheName:"demo.appcache",     // Not required Default `app.appcache`
      comments:"I am commnets",       // Not required Default `add static cache webpack plugin appCache`
      publicPath:"/static/"                  // Not required Default create temp file in your `webpack.config.js` `output options publicPath`
    })
 ```
 
 #### It looks something like this after compilation
 
 `/static/demo.appcache`
 ```
 CACHE MANIFEST
# I an comments
# 2017/7/10 16:40:00
/static/css/app.e2bba250.css

/static/js/app.746fs3.js

/static/fonts/iconfont13955767.svg
/static/fonts/iconfonta5689859.ttf
/static/fonts/iconfont75dce69e.eot
/static/fonts/iconfont57b7441e.woff

/static/images/banner1942579a6.jpg
/static/images/head_img_s09e1d321.jpg


NETWORK:
*

FALLBACK
# feeStyle
/static/ /404.html
 ```
 
 #### Then
 ##### Import him in your `html` file
 
 ```javascript
<html lang="zh" manifest="/static/demo.appcache">
...
</html>
 ```
 
 `F12` look Application => Cache => Application Cache 
 There should be your cache :)

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