升级workbox-webpack-plugin至v7后importWorkboxFrom配置报错求解决

Workbox v7的GenerateSW插件已移除importWorkboxFrom配置项，要实现从CDN加载Workbox runtime的功能，需按以下方式修改配置：

1. 移除原配置中的importWorkboxFrom: 'cdn'
2. 添加inlineWorkboxRuntime: false，避免将Workbox代码内联到生成的Service Worker中
3. 添加importScripts数组，指定与插件版本一致的Workbox CDN地址

修改后的配置示例：

new WorkboxWebpackPlugin.GenerateSW({
  clientsClaim: true,
  exclude: [/\.map$/, /asset-manifest\.json$/],
  // 新增配置
  inlineWorkboxRuntime: false,
  importScripts: [
    'https://storage.googleapis.com/workbox-cdn/releases/7.0.0/workbox-sw.js'
  ],
  navigateFallback: publicUrl + '/index.html',
  navigateFallbackBlacklist: [
    new RegExp('^/_'),
    new RegExp('/[^/?]+\\.[^/]+$'),
  ],
}),

说明 #

• inlineWorkboxRuntime: false：告知插件不要将Workbox核心代码内联到生成的Service Worker文件中，改为通过外部CDN加载
• importScripts中的CDN链接需与你安装的workbox-webpack-plugin版本完全匹配，避免版本不兼容引发问题

内容的提问来源于stack exchange，提问作者Shivam Verma