javascript - 如何配置 sw-precache-webpack-plugin 以缓存自定义路径

Question

我用 create-react-app 创建了一个反应应用程序并将其弹出。 service-worker.js正在寻找/index.html，/static/js/main.js并/static/css/main.css缓存。我想将其配置为查找/index.html，/js/main.js并且/js/main.css不更改其输出目录。谢谢

Answer 1

首先要知道的是它sw-precache实际上并不包含您的源代码。他们所做的是生成一个文件列表，一旦安装，他们将检索并存储在缓存中。

也就是说，如果您已经退出，我建议您升级到现在称为 Workbox 的最新版本。（https://developers.google.com/web/tools/workbox/get-started/webpack）

我一直使用它的方式是让它扫描目录中的特定文件类型并包含这些文件类型。因此，如果我将图像添加到目录中，它将包含在新的 service-worker 中。您可以将其设置为扫描您的构建文件夹。

new workboxPlugin({
  globDirectory: path.resolve('build'),
  globPatterns: ['**/*.{html,js,css,png,svg}'],
  swDest: path.resolve('dist', 'sw.js'),
}),

对于其他选项（例如忽略大文件，不刷新散列资产等，您可以在此处查看配置文档：（https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox -build#.配置）