0.1.6 • Published 7 years ago
add-static-cache-webpack-plugin v0.1.6
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
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}
- type :
cacheName
- type :
String
- default :
'app.appcache'
- type :
comments
- type :
String
- default :
'add static cache webpack plugin appCache'
- type :
publicPath
- type :
String
default : ""
DEFAULT TEMP FILE
const defaultTpl = ` CACHE MANIFEST # add static cache webpack plugin appCache # {date} {cssPath} {fontsPath} {imagesPath} {jsPath}
- type :
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
<html lang="zh" manifest="/static/demo.appcache">
...
</html>
F12
look Application => Cache => Application Cache
There should be your cache :)