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 ?
const AddStaticCachePlugin = require('add-static-cache-webpack-plugin')
...
module.exports = {
...
plugins: [
new AddStaticCachePlugin({
tempalte:"",
cacheName:"jinke.appcache",
comments:"I am commnets",
publicPath:"/"
})
]
};
options
-
template
- type :
String
- default :
{DEFAULT TEMP FILE}
-
cacheName
- type :
String
- default :
'app.appcache'
-
- 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}
-
if your want custom template like
mkdir my.tpl
CACHE MANIFEST
# {comments}
# {date}
{cssPath}
{fontsPath}
{jsPath}
{imagesPath}
NETWORK:
*
FALLBACK
# feestyle
/static/ /404.html
Then
new AddStaticCachePlugin({
tempalte:"./my.tpl",
cacheName:"demo.appcache",
comments:"I am commnets",
publicPath:"/static/"
})
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 :)