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

Question

我已经使用 create-react-app 创建了一个 React 应用程序并将其弹出。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)

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

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

对于其他选项(例如忽略大文件、不刷新哈希 Assets 等，您可以在此处查看配置文档:(https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-build#.Configuration)