webpack - 错误的 list 预缓存位置

Question

我正在尝试使用 Workbox.injectManifest 生成服务工作线程，但我的服务工作线程到预缓存 list 的路径未正确生成，因此出现问题。

我的 Webpack output.path 是 'path.resolve('./scripts/app/dist')' 和我的 Workbox 配置:

new WorkboxPlugin.InjectManifest({
        swSrc: path.resolve("./scripts/app/src/service-worker.js"),
        swDest: "../../../sw.js",        
        globDirectory: path.resolve("./"),
        globPatterns: [
            "scripts/**/*.js",
            "fonts/**/*.{eot,ttf,woff,woff2,otf}",
            "images/**/*.{png,jpg,svg,gif,ico}",
            "styles/**/*.css"
        ]
    });

因为默认情况下 Workbox 在 output.path 中创建 sw.js，并且我希望它位于我网站的根目录中，所以我有 ../../../sw.js 但是预缓存 list 将保留在output.path中，即./scripts/app/dist。问题是生成的 sw.js 中指向 list 的路径是:

importScripts("precache-manifest.472387a6bbb5e3e8f5e8392d628202d5.js", "https://storage.googleapis.com/workbox-cdn/releases/3.1.0/workbox-sw.js");

这指向 sw.js 所在的位置，它位于站点根目录上，但无法找到。这是一个错误还是我配置不正确？我尝试过使用“importsDirectory”，但只是将 list 移动到另一个位置，sw.js 上的路径仍然是错误的。

更新

我的服务 worker 模板中有这个:

workbox.skipWaiting();
workbox.clientsClaim();

workbox.precaching.precacheAndRoute([])

workbox.routing.registerRoute( .......

但是当我构建时，数组没有填充并且创建了一个外部 list :这是插件创建的内容:

importScripts("precache-manifest.aa4b439ba2589f9d3cf0c56e1b06323d.js", "https://storage.googleapis.com/workbox-cdn/releases/3.1.0/workbox-sw.js");

workbox.skipWaiting();
workbox.clientsClaim();

workbox.precaching.precacheAndRoute([])

workbox.routing.registerRoute(

Answer 1

您需要设置importsDirectory初始化 InjectManifest 时的参数。

例如，我希望我的预缓存 list 位于公共(public)文件夹中，因此我的配置如下所示:

new InjectManifest({
    swSrc: './resources/js/sw.js',
    swDest: '../sw.js',
    importsDirectory: '../'
})

根据您的 swDest 值，我怀疑您的导入目录可能需要 ../../../ 值。