如何将SW-PRECACHE-WEBPACK-PLUGIN配置为缓存自定义路径

Question

我已经创建了一个具有Create-React-App的React应用程序，并将其弹出。 service-worker.js正在寻找/index.html，/static/js/main.js和/static/css/main.css的CCACHE。我想将其配置为查找/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'),
}),

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