Webpack workbox 在您的 SW 源中找不到 self.__WB_MANIFEST

Question

我从 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 是否会像 v4 一样在 precach-manifest 文件中创建并自动导入？

网络包配置：

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 */

Answer 1

这是我的 webpack 配置的 injectManifest 错误，我这样修复了它：

    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 将替换为预缓存文件列表

Answer 2

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

来自：

workbox.precaching.precacheAndRoute([]);

至：

import { precacheAndRoute } from 'workbox-precaching/precacheAndRoute';
...
precacheAndRoute(self.__WB_MANIFEST);

Webpack workbox 在您的 SW 源中找不到 self.__WB_MANIFEST

Webpack workbox Can't find self.__WB_MANIFEST in your SW source

webpack

workbox

workbox-webpack-plugin