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

【问题标题】：How to configure sw-precache-webpack-plugin to cache custom paths如何配置 sw-precache-webpack-plugin 以缓存自定义路径
【发布时间】：2018-02-15 07:47:48
【问题描述】：

我已经使用 create-react-app 创建了一个反应应用程序并将其弹出。 service-worker.js 正在寻找 /index.html、/static/js/main.js 和 /static/css/main.css 进行缓存。我想将其配置为在不更改其输出目录的情况下查找 /index.html、/js/main.js 和 /js/main.css。谢谢

【问题讨论】：

标签： javascript reactjs webpack create-react-app sw-precache

【解决方案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#.Configuration)

【讨论】：

与此相呼应，我不再维护 sw-precache-webpack-plugin，您应该使用支持的工作箱插件。