从 webpack-plugin 中的本地 v5 导入工作箱答案

【问题标题】：import workbox from local v5 in webpack-plugin从 webpack-plugin 中的本地 v5 导入工作箱
【发布时间】：2020-06-14 20:26:57
【问题描述】：

正如我们现在在工作箱的第 5 版中，importWorkboxFrom 配置已被删除，但如果我们使用 injectManifest，我们应该如何在本地导入工作箱？将importScripts 与https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js 一起使用是唯一的方法吗？

docs 说 generateSW 默认使用本地导入，但 injectManifest 呢？ https://developers.google.com/web/tools/workbox/guides/migrations/migrate-from-v4#build_tool_option_overhaul

【问题讨论】：

标签： workbox sw-precache workbox-webpack-plugin

【解决方案1】：

如果您在 InjectManifest 模式下使用 Workbox v5，那么您应该使用 Workbox 运行时库 ES 模块，并允许 webpack 将它们编译/捆绑到最终输出 swDest 文件中。您不再需要使用importScripts() 或CDN。

在https://developers.google.com/web/tools/workbox/guides/using-bundlers#moving_from_importscripts_to_module_imports了解有关进行此更改的更多信息

【讨论】：

谢谢，这样自定义importScripts应该放在哪里？ webpack 确实编译了 workbox-sw 并且 injectManifest 会在上面添加一些数据。由于在 v5 中从注入清单中删除了 importScripts 属性，我们应该在其中添加自定义 importScripts?
在 v5 中 InjectManifest 模式下，您可以将原本要放入导入脚本的逻辑直接包含在顶级 swSrc 文件中，或者将 importScripts('path/to/imports.js') 写入你的swSrc 文件。您可以完全控制 Service Worker 的内容。