这是一个WebPACK插件。这主要是HTML5的缓存清单文件生成。生成HTML5的缓存清单文件，生成资产体现WebPACK插件，和 <html>标签、 manifest属性插入。
webpack-manifest
安装
$ npm i webpack-manifest --save-dev复制代码
开始使用
var Manifest= require('webpack-manifest');var pkg =require('./package');module.exports = { plugins:[ // 这个要放在前面就可以自动在 ``标签中插入`manifest`属性 // This should be placed in the front can antomatically insert the `manifest` attribute in hte `` tag new HtmlWebpackPlugin({...}), new Manifest({ cache: [ 'js/[hash:8].sorting-index.js', 'css/[hash:8].sorting-test.css', 'css/[hash:8].index-index.css' ], //Add time in comments. timestamp: true, // 生成的文件名字，选填 // The generated file name, optional. filename:'cache.manifest', // 注意*星号前面用空格隔开 network: [ 'http://api.map.baidu.com/ *', 'http://img.jslite.com/ *' ], // 注意中间用空格隔开 fallback: ['/ /404.html'], // manifest 文件中添加注释 // Add notes to manifest file. headcomment: pkg.name + " v" + pkg.version, master: ['index/index.html'] }) ]}复制代码 生成 cache.manifest 文件
CACHE MANIFEST# Time: Sat Jun 04 2016 17:11:50 GMT+0800 (CST)# webpack-multipage v1.0.0CACHE:js/8d4976fb.sorting-index.jscss/667ca815.sorting-test.csscss/3eaf22d0.index-index.cssNETWORK:http://api.map.baidu.com/ * http://img.jslite.com/ * FALLBACK:/ /404.html复制代码
NETWORK
下面的 NETWORK 小节规定文件 "login.php" 永远不会被缓存，且离线时是不可用的，
NETWORK:login.phphttp://img.jslite.com/ *复制代码
可以使用星号来指示所有其他资源/文件都需要因特网连接，或者你需要让某个地址下的所有请求不缓存这样配置http://img.jslite.com/ *，星号前面用空格隔开。
NETWORK:*复制代码
FALLBACK
下面的 FALLBACK 小节规定如果无法建立因特网连接，则用 "404.html" 替代 /html5/ 目录中的所有文件：
FALLBACK:/html5/ /404.html复制代码
注释：第一个 URI 是资源，第二个是替补。
master
指定一个HTML页面引入cache.manifest，例如
复制代码
- 只需要一个页面引入使用缓存配置
- 没引入的页面会自动读取缓存配置
更新缓存
一旦应用被缓存，它就会保持缓存直到发生下列情况：
- 用户清空浏览器缓存
- manifest 文件被修改
- 由程序来更新应用缓存
说明
如何实现离线访问特性，实现的步骤非常简单，主要3个步骤：
- 在服务器上添加MIME TYPE支，让服务器能够识别manifest后缀的文件
AddType text/cache-manifest manifest
- 创建一个后缀名为.manifest的文件，把需要缓存的文件按格式写在里面，并用注释行标注版本
CACHE MANIFEST# Time: Sat Jun 04 2016 17:11:50 GMT+0800 (CST)# webpack-multipage v1.0.0 CACHE:Path/to/cache.js复制代码
- 给
<html>标签加manifest属性，并引用manifest文件
复制代码
Apache设置
manifest的mime类型，apache下可以在httpd.conf中加上
AddType text/cache-manifest manifestAddType text/cache-manifest .appcache复制代码
自动缓存的解决方案
在每个页面通过 iframe来引用这个静态文件，以达到我们不缓存当面页面，只缓存我们希望缓存文件的目的。
缓存导致接口请求没有发送出去
在NETWORK设置白名单，但是接口请求如果是https有可能导致失败，接口报错信息Provisional headers are shown，这个原因是你指定白名单，并且请求是https。
NETWORK:https://api.jslite.com/ *复制代码
解决方法： NETWORK白名单设置通配符*，如下：
NETWORK:*复制代码
Chrome相关调试测试
查看cache
可以查看和清除缓存
chrome://appcache-internals复制代码
测试
- 打开调试工具
option+command+i选择Network，工具栏选择Offline - 地址栏打开网址
chrome://flags/#show-saved-copy
# 设置下面选项# Enable: Primary复制代码