5

我从 webpack-workbox-plugin 的 v4 迁移到 v5，但是当我尝试构建时，出现错误：

ERROR in Can't find self.__WB_MANIFEST in your SW source.
Child InjectManifest:
    Asset     Size  Chunks             Chunk Names
    sw.js  1.5 KiB       0  [emitted]  InjectManifest
Child html-webpack-plugin for "index.html":
     1 asset

是否__WB_MANIFEST会在 precach-manifest 文件中创建并像 v4 一样自动导入？

网络包配置：

new WorkboxPlugin.InjectManifest({
      swSrc: 'sw.js',
      chunks: ['*.chunk.js'],
      exclude: [/\.(?:png|jpg|jpeg|svg)$/, /\.map$/, /manifest\.json$/, /service-worker\.js$/, /sw\.js$/],
      include: [path.resolve(process.cwd(), 'build')],
    }),

我的 sw.js：


importScripts('./ChabokSDKWorker.js', 'https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js');

/* eslint-disable no-undef */

if (workbox) {
  workbox.core.skipWaiting();
  workbox.core.clientsClaim();
  workbox.precaching.cleanupOutdatedCaches();

  // eslint-disable-next-line no-restricted-globals,no-underscore-dangle
  workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);

  // java-script files cache
  workbox.routing.registerRoute(
    new RegExp('.+\\.js$'),
    workbox.strategies.StaleWhileRevalidate({
      cacheName: 'js-cache',
      plugins: [
        new workbox.expiration.Plugin({
          maxEntries: 20,
          maxAgeSeconds: 60 * 60 * 24 * 7,
          purgeOnQuotaError: true,
        }),
        new workbox.cacheableResponse.Plugin({
          statuses: [0, 200],
        }),
      ],
    }),
  );

  // css files cache
  workbox.routing.registerRoute(
    new RegExp('.+\\.css$'),
    workbox.strategies.StaleWhileRevalidate({
      cacheName: 'css-cache',
      plugins: [
        new workbox.expiration.Plugin({
          maxEntries: 5,
          maxAgeSeconds: 60 * 60 * 24 * 7,
          purgeOnQuotaError: true,
        }),
        new workbox.cacheableResponse.Plugin({
          statuses: [0, 200],
        }),
      ],
    }),
  );

  // image files cache
  workbox.routing.registerRoute(
    new RegExp('.+\\.(png|jpg|jpeg|svg)$'),
    workbox.strategies.CacheFirst({
      cacheName: 'images-cache',
      plugins: [
        new workbox.expiration.Plugin({
          maxEntries: 20,
          maxAgeSeconds: 60 * 60 * 24 * 7,
          purgeOnQuotaError: true,
        }),
        new workbox.cacheableResponse.Plugin({
          statuses: [0, 200],
        }),
      ],
    }),
  );

  workbox.routing.registerRoute(
    new RegExp('/.*'),
    workbox.strategies.NetworkFirst({}),
    'GET',
  );
} else {
  console.log(`Boo! Workbox didn't load `);
}
/* eslint-enable no-undef */
4

2 回答 2

3

这是我针对 injectManifest 错误的 webpack 配置，我将其修复如下：

    new WorkboxPlugin.InjectManifest({
      swSrc: path.join(process.cwd(), '/app/resources/service-worker.js'),
      swDest: 'sw.js',
      exclude: [
        /\.map$/,
        /manifest$/,
        /\.htaccess$/,
        /service-worker\.js$/,
        /sw\.js$/,
      ],
    }),

现在self.__WB_MANIFEST将替换为预缓存文件列表

于 2020-03-03T09:15:19.787 回答
0

从 v3 升级到 v6 后，以下更改修复了此错误。

从：

workbox.precaching.precacheAndRoute([]);

到：

import { precacheAndRoute } from 'workbox-precaching/precacheAndRoute';
...
precacheAndRoute(self.__WB_MANIFEST);
于 2022-01-31T21:26:39.463 回答