缓存>> add-static-cache-webpack-plugin>> 返回
项目作者： lijinke666

项目描述 ：
:triangular_flag_on_post: webpack plugin - add static cache manifest file to your project
高级语言： JavaScript
项目地址: git://github.com/lijinke666/add-static-cache-webpack-plugin.git
创建时间： 2017-07-10T03:34:25Z
项目社区：https://github.com/lijinke666/add-static-cache-webpack-plugin
开源协议：MIT License
下载


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

  1. 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
})
]
};

  2. ### options
  3. --- 
  4. - #### template
  5.   - type : `String`
  6.   - default : `{DEFAULT TEMP FILE}`
  7. - #### cacheName
  8.   - type : `String`
  9.   - default : `'app.appcache'`
  10. - #### comments
  11.   - type : `String`
  12.   - default : `'add static cache webpack plugin appCache'`
  13. - #### publicPath
  14.   - type : `String`
  15.   - default : ""
  17.  ---
  19.  ### DEFAULT TEMP FILE
  1.  const defaultTpl = ` 
  2.       CACHE MANIFEST
  3.       # add static cache webpack plugin appCache
  4.       # {date}
  5.       {cssPath}
  6.       {fontsPath}
  7.       {imagesPath}
  8.       {jsPath}
  11.       NETWORK:
  12.       *
  13. `
  2.  ### temp placeholder
  3.  - ##### {date}
  4.  - ##### {cssPath}
  5.  - ##### {jsPath}
  6.  - ##### {fontsPath}
  7.  - ##### {comments}
  9.  ### if your want custom template like
  10.  `mkdir my.tpl`

CACHE MANIFEST

{comments}

{date}

{cssPath}
{fontsPath}
{jsPath}
{imagesPath}

NETWORK:
*

FALLBACK

feestyle

/static/ /404.html

  1.  #### Then
  3.  ```javascript
  4.      new AddStaticCachePlugin({
  5.       tempalte:"./my.tpl",                    // Not required Default template  See the instructions below
  6.       cacheName:"demo.appcache",     // Not required Default `app.appcache`
  7.       comments:"I am commnets",       // Not required Default `add static cache webpack plugin appCache`
  8.       publicPath:"/static/"                  // Not required Default create temp file in your `webpack.config.js` `output options publicPath`
  9.     })

It looks something like this after compilation

/static/demo.appcache

  1.  CACHE MANIFEST
  2. # I an comments
  3. # 2017/7/10 16:40:00
  4. /static/css/app.e2bba250.css
  6. /static/js/app.746fs3.js
  8. /static/fonts/iconfont13955767.svg
  9. /static/fonts/iconfonta5689859.ttf
  10. /static/fonts/iconfont75dce69e.eot
  11. /static/fonts/iconfont57b7441e.woff
  13. /static/images/banner1942579a6.jpg
  14. /static/images/head_img_s09e1d321.jpg
  17. NETWORK:
  18. *
  20. FALLBACK
  21. # feeStyle
  22. /static/ /404.html

Then

Import him in your html file
If your use html-webpack-plugin You can omit this step It will be auto import :)
  1. <html lang="zh" manifest="/static/demo.appcache">
  2. ...
  3. </html>

F12 look Application => Cache => Application Cache
There should be your cache :)