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 amanifest.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://zhuanlan.zhihu.com/p/90829472
