Webpack工作箱找不到自己。__WB_MANIFEST在您的SW源中

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是否将在prechach清单文件中创建并像v4一样自动导入？

WebpackConfig：

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

这是我的用于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将替换为预缓存文件列表