add files.

jaywcjlove · May 31, 2016 · 5929b60 · 5929b60
1 parent e06fd19
commit 5929b60
Show file tree

Hide file tree

Showing 4 changed files with 221 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/README.md b/README.md
@@ -0,0 +1,109 @@
+# webpack-manifest
+
+如何实现离线访问特性  
+实现的步骤非常简单，主要3个步骤：  
+
+- 在服务器上添加MIME TYPE支，让服务器能够识别manifest后缀的文件
+
+> AddType text/cache-manifest manifest
+
+- 创建一个后缀名为.manifest的文件，把需要缓存的文件按格式写在里面，并用注释行标注版本
+
+```bash
+CACHE MANIFEST
+# 直接缓存的文件
+CACHE:
+Path/to/cache.js
+# version：2012-03-20
+```
+
+- 给 `<html>` 标签加 `manifest` 属性，并引用`manifest`文件
+
+```html
+<html manifest=”path/to/name-of.manifest”>
+```
+
+# 使用方法
+
+```js
+new Manifest({
+    filename:'app.manifest',
+    network:["*"],
+    fallback:{
+        "/html5/":"/404.html"
+    },
+    outputPath:path.resolve(__dirname, 'deploy/'+ pkg.version),
+    //ext:'*'
+    ext:'.jpg|.png|.gif|.ps|.jpeg'
+});
+```
+
+## outputPath
+
+输出目录
+
+## network
+
+下面的 NETWORK 小节规定文件 "login.php" 永远不会被缓存，且离线时是不可用的：
+
+```
+NETWORK:
+login.php
+```
+
+可以使用星号来指示所有其他资源/文件都需要因特网连接：
+
+```
+NETWORK:
+*
+```
+
+## fallback
+
+下面的 FALLBACK 小节规定如果无法建立因特网连接，则用 "404.html" 替代 /html5/ 目录中的所有文件：
+
+```
+FALLBACK:
+/html5/ /404.html
+```
+
+注释：第一个 URI 是资源，第二个是替补。
+
+## ext
+
+`.jpg|.gif`
+
+## 更新缓存
+
+一旦应用被缓存，它就会保持缓存直到发生下列情况：
+
+ - 用户清空浏览器缓存
+ - manifest 文件被修改（参阅下面的提示）
+ - 由程序来更新应用缓存
+
+
+## 实例 
+
+完整的 Manifest 文件  
+以 `#` 开头的是注释行，但也可满足其他用途。  
+
+```
+CACHE MANIFEST
+# 2012-02-21 v1.0.0
+/theme.css
+/logo.gif
+/main.js
+
+NETWORK:
+login.asp
+
+FALLBACK:
+/html5/ /404.html
+```
+
+
+# 参考资料
+
+- [mozilla 使用应用缓存](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Using_the_application_cache)
+- [HTML5离线存储 初探](http://www.cnblogs.com/chyingp/archive/2012/12/01/explore_html5_cache.html)
+- [how to write a plugin](https://webpack.github.io/docs/how-to-write-a-plugin.html)
diff --git a/index.js b/index.js
@@ -0,0 +1,92 @@
+var _ = require('lodash');
+var fs = require('fs');
+var path = require('path');
+
+var ManifestGenerator = function(options){
+    this.options = _.extend({
+      filename: 'app.manifest',
+      network:[],
+      fallback:{},
+      ext:'*'
+    }, options);
+}
+
+function inNETWORK(file,arr){
+    var isnt = false
+    for (var i = 0; i < arr.length; i++) {
+        if(file.indexOf(arr[i])>-1){
+            isnt = true;
+            break;
+        }
+    }
+    return isnt;
+}
+
+ManifestGenerator.prototype.apply = function(compiler){
+    var self = this;
+    var outputPath = this.options.outputPath;
+    var filename = this.options.filename;
+    var ext = this.options.ext;
+    var manifest = 'CACHE MANIFEST\n# Time：' + new Date() + '\n';
+    var fallback = this.options.fallback;
+    var network = this.options.network;
+
+    // 优化不需要的数据
+    var options = {
+        source: false,
+        modules: false
+    };
+    compiler.plugin('emit', function(compilation, callback) {
+        var outputData = [];
+        var networkData = [];
+        _.forOwn(compilation.assets, function(value, url) {
+            if(!inNETWORK(url,network)){
+                if(ext === "*") outputData.push(url);
+                else{
+                    var strRegex = "("+ext+")";
+                    var re=new RegExp(strRegex);
+                    if (re.test(str)){
+                        outputData.push(url);
+                    }
+                }
+
+            }
+            if(inNETWORK(url,network)){
+                networkData.push(url)
+            }
+        });
+
+        if(compilation.records) for (var url in compilation.records) {
+            if(url.indexOf('html-webpack-plugin')>-1){
+                var urld = url.match(/html-webpack-plugin for \"(.*)\"/);
+
+                if(RegExp.$1 && !inNETWORK(RegExp.$1,network)){
+                    outputData.push(RegExp.$1);
+                }else{
+                    (RegExp.$1)&&networkData.push(RegExp.$1);
+                }
+            }
+        }
+
+        manifest += outputData.join('\n')
+
+        if(networkData.length>0){
+            manifest += '\n\nNETWORK:\n';
+            manifest += networkData.join('\n');
+        }
+        // Insert this list into the Webpack build as a new file asset:
+        compilation.assets[filename] = {
+            source: function() {
+              return manifest;
+            },
+            size: function() {
+              return manifest.length;
+            }
+        };
+        callback();
+    });
+
+
+}
+
+module.exports = ManifestGenerator;
diff --git a/package.json b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "webpack-manifest",
+  "version": "1.0.0",
+  "description": "webpack plugin for generating asset manifests.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "webpack",
+    "manifest",
+    "plugin"
+  ],
+  "author": "kenny wang <wowohoo@qq.com>",
+  "license": "MIT",
+  "dependencies": {
+    "lodash": "^4.13.1"
+  }
+}