Question

我正在使用workbox webpack插件v3.01和webpack v3.11。

我的webpack构建将index.html输出到wwwroot文件夹中，该文件夹是src的兄弟。捆绑包进入wwwwroot / dist文件夹。所以，为了缓存index.html，我需要将服务工作者输出到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中，我看到了问题：

＆＃13;

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

＆＃13;

因此从正确的位置导入workbox-sw.js文件。但是，modulePathPrefix不正确。我相信如果modulePathPrefix包含/ dist /.

，它会起作用

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

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

从错误的文件夹

0 个答案: