js svg 转成文件_web前端常见的三种manifest文件

manifest.json

manifest.json经常被用在PWA，用来 告知浏览器 关于PWA应用的一些信息如应用图标、启动应用的画面。举例：

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

assets-manifest.json

assets-manifest.json经常会在create-react-app这个脚手架的打包文件上看到，由webpack-manifest-plugin这个webpack插件产生。举例：

{
  "files": {
    "main.css": "/static/css/main.491bee12.chunk.css",
    "main.js": "/static/js/main.14bfbead.chunk.js",
    "main.js.map": "/static/js/main.14bfbead.chunk.js.map",
    "runtime-main.js": "/static/js/runtime-main.e89362ac.js",
    "runtime-main.js.map": "/static/js/runtime-main.e89362ac.js.map",
    "static/js/2.017bb613.chunk.js": "/static/js/2.017bb613.chunk.js",
    "static/js/2.017bb613.chunk.js.map": "/static/js/2.017bb613.chunk.js.map",
    "index.html": "/index.html",
    "precache-manifest.33b41575e0c64a21bca1a6091e8a5c6d.js": "/precache-manifest.33b41575e0c64a21bca1a6091e8a5c6d.js",
    "service-worker.js": "/service-worker.js",
    "static/css/main.491bee12.chunk.css.map": "/static/css/main.491bee12.chunk.css.map",
    "static/media/logo.svg": "/static/media/logo.25bf045c.svg"
  },
  "entrypoints": [
    "static/js/runtime-main.e89362ac.js",
    "static/js/2.017bb613.chunk.js",
    "static/css/main.491bee12.chunk.css",
    "static/js/main.14bfbead.chunk.js"
  ]
}

wepack-mainfest-plugin对它自身的介绍是：

This will generate a manifest.jsonfile in your root output directory with a mapping of all source file names to their corresponding output file。

意思就是assets-manifest.json其实只是源文件和加哈希后文件的一个对比表，仅此而已。它不会对应用的运行产生任何影响，浏览器也不会去请求它。

precache-manifest.js

这个文件由workbox-webpack-plugin插件生成， 用来告诉workbox哪些静态文件可以缓存。例如：

/**
 * The workboxSW.precacheAndRoute() method efficiently caches and responds to
 * requests for URLs in the manifest.
 * See https://goo.gl/S9QRab
 */
self.__precacheManifest = [].concat(self.__precacheManifest || []);
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

其中self.__precacheManifest的值就是precache-manifest.js的内容。

参考：

https://developers.google.com/web/fundamentals/web-app-manifest/​developers.google.com What's assets-manifest.json and how does it work? · Issue #6436 · facebook/create-react-app​github.com