1

我正在使用带有 webpack v3.11 的工作箱 webpack 插件 v3.01。

我的 webpack 构建将 index.html 输出到 wwwroot 文件夹中，该文件夹是 src 的兄弟。捆绑包位于 wwwwroot/dist 文件夹中。因此，为了缓存 index.html，我需要将 service worker 输出到 wwwroot。部署时，我显然不希望对 wwwroot 进行任何引用。

Webpack 输出配置：

const bundleOutputDir = "./wwwroot/dist";
...
output: {
       path: path.join(__dirname, bundleOutputDir),
       filename: "[name].js",
       publicPath: "/dist/"
    }

工作箱配置：

new workboxPlugin.GenerateSW({
                              swDest: path.join("../../wwwroot", "sw.js"),
                              clientsClaim: true,
                              skipWaiting: true,
                              importWorkboxFrom: 'local',
                              runtimeCaching: [
                                  {
                                      urlPattern: new RegExp("/api/"),
                                      handler: "networkFirst"
                                  }
                              ]
                          })

除插件外，一切正常。在生成的 sw.js 中，我看到了问题：

importScripts("/dist/workbox-v3.0.1/workbox-sw.js");
workbox.setConfig({modulePathPrefix: "workbox-v3.0.1"});

importScripts(
  "/dist/precache-manifest.e5343547924aadc82abad909b11fc508.js"
);

所以 workbox-sw.js 文件是从正确的位置导入的。但是，modulePathPrefix 不正确。我相信如果 modulePathPrefix 包含 /dist/ 它将起作用。

我发现了一个类似的 github 问题（它是用于清单注入而不是 GenerateSW），它表明 webpack 输出部分中配置的 publicPath 存在问题。

我一直在尝试各种配置更改，这些更改当然都是相互关联的。我希望我能以某种方式指定正确的 modulePathPrefix。

4

0 回答 0