@serwist/webpack-plugin 8.4.3 → 9.0.0-preview.0

package/src/inject-manifest.ts

@@ -0,0 +1,287 @@
+/*
+  Copyright 2018 Google LLC
+
+  Use of this source code is governed by an MIT-style
+  license that can be found in the LICENSE file or at
+  https://opensource.org/licenses/MIT.
+*/
+import type { WebpackInjectManifestOptions } from "@serwist/build";
+import { escapeRegExp, replaceAndUpdateSourceMap, validateWebpackInjectManifestOptions } from "@serwist/build";
+import stringify from "fast-json-stable-stringify";
+import prettyBytes from "pretty-bytes";
+import upath from "upath";
+import type { Compilation } from "webpack";
+import webpack from "webpack";
+
+import { getManifestEntriesFromCompilation } from "./lib/get-manifest-entries-from-compilation.js";
+import { getSourcemapAssetName } from "./lib/get-sourcemap-asset-name.js";
+import { relativeToOutputPath } from "./lib/relative-to-output-path.js";
+
+// Used to keep track of swDest files written by *any* instance of this plugin.
+// See https://github.com/GoogleChrome/workbox/issues/2181
+const _generatedAssetNames = new Set<string>();
+
+/**
+ * This class supports compiling a service worker file provided via `swSrc`,
+ * and injecting into that service worker a list of URLs and revision
+ * information for precaching based on the webpack asset pipeline.
+ *
+ * Use an instance of `InjectManifest` in the
+ * [`plugins` array](https://webpack.js.org/concepts/plugins/#usage) of a
+ * webpack config.
+ *
+ * In addition to injecting the manifest, this plugin will perform a compilation
+ * of the `swSrc` file, using the options from the main webpack configuration.
+ *
+ * ```
+ * // The following lists some common options; see the rest of the documentation
+ * // for the full set of options and defaults.
+ * new InjectManifest({
+ *   exclude: [/.../, '...'],
+ *   maximumFileSizeToCacheInBytes: ...,
+ *   swSrc: '...',
+ * });
+ * ```
+ */
+export class InjectManifest {
+  protected config: WebpackInjectManifestOptions;
+  private alreadyCalled: boolean;
+
+  /**
+   * Creates an instance of InjectManifest.
+   */
+  constructor(config: WebpackInjectManifestOptions) {
+    this.config = config;
+    this.alreadyCalled = false;
+  }
+
+  /**
+   * @param compiler default compiler object passed from webpack
+   *
+   * @private
+   */
+  propagateWebpackConfig(compiler: webpack.Compiler): void {
+    const parsedSwSrc = upath.parse(this.config.swSrc);
+    // Because this.config is listed last, properties that are already set
+    // there take precedence over derived properties from the compiler.
+    this.config = Object.assign(
+      {
+        mode: compiler.options.mode,
+        // Use swSrc with a hardcoded .js extension, in case swSrc is a .ts file.
+        swDest: `${parsedSwSrc.name}.js`,
+      },
+      this.config,
+    );
+  }
+
+  /**
+   * `getManifestEntriesFromCompilation` with a few additional checks.
+   *
+   * @private
+   */
+  async getManifestEntries(compilation: webpack.Compilation, config: WebpackInjectManifestOptions) {
+    if (config.disablePrecacheManifest) {
+      return {
+        size: 0,
+        sortedEntries: undefined,
+        manifestString: "undefined",
+      };
+    }
+
+    // See https://github.com/GoogleChrome/workbox/issues/1790
+    if (this.alreadyCalled) {
+      const warningMessage = `${this.constructor.name} has been called multiple times, perhaps due to running webpack in --watch mode. The precache manifest generated after the first call may be inaccurate! Please see https://github.com/GoogleChrome/workbox/issues/1790 for more information.`;
+
+      if (!compilation.warnings.some((warning) => warning instanceof Error && warning.message === warningMessage)) {
+        compilation.warnings.push(new Error(warningMessage) as webpack.WebpackError);
+      }
+    } else {
+      this.alreadyCalled = true;
+    }
+
+    // Ensure that we don't precache any of the assets generated by *any*
+    // instance of this plugin.
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    config.exclude!.push(({ asset }) => _generatedAssetNames.has(asset.name));
+
+    const { size, sortedEntries } = await getManifestEntriesFromCompilation(compilation, config);
+
+    let manifestString = stringify(sortedEntries);
+    if (
+      this.config.compileSrc &&
+      // See https://github.com/GoogleChrome/workbox/issues/2729
+      !(compilation.options?.devtool === "eval-cheap-source-map" && compilation.options.optimization?.minimize)
+    ) {
+      // See https://github.com/GoogleChrome/workbox/issues/2263
+      manifestString = manifestString.replace(/"/g, `'`);
+    }
+
+    return { size, sortedEntries, manifestString };
+  }
+
+  /**
+   * @param compiler default compiler object passed from webpack
+   *
+   * @private
+   */
+  apply(compiler: webpack.Compiler): void {
+    this.propagateWebpackConfig(compiler);
+
+    compiler.hooks.make.tapPromise(this.constructor.name, (compilation) =>
+      this.handleMake(compilation, compiler).catch((error: webpack.WebpackError) => {
+        compilation.errors.push(error);
+      }),
+    );
+
+    const { PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER } = webpack.Compilation;
+    // Specifically hook into thisCompilation, as per
+    // https://github.com/webpack/webpack/issues/11425#issuecomment-690547848
+    compiler.hooks.thisCompilation.tap(this.constructor.name, (compilation) => {
+      compilation.hooks.processAssets.tapPromise(
+        {
+          name: this.constructor.name,
+          // TODO(jeffposnick): This may need to change eventually.
+          // See https://github.com/webpack/webpack/issues/11822#issuecomment-726184972
+          stage: PROCESS_ASSETS_STAGE_OPTIMIZE_TRANSFER - 10,
+        },
+        () =>
+          this.addAssets(compilation).catch((error: webpack.WebpackError) => {
+            compilation.errors.push(error);
+          }),
+      );
+    });
+  }
+
+  /**
+   * @param compilation The webpack compilation.
+   * @param parentCompiler The webpack parent compiler.
+   *
+   * @private
+   */
+  async performChildCompilation(compilation: webpack.Compilation, parentCompiler: webpack.Compiler): Promise<void> {
+    const outputOptions: Parameters<Compilation["createChildCompiler"]>["1"] = {
+      filename: this.config.swDest,
+    };
+
+    const childCompiler = compilation.createChildCompiler(this.constructor.name, outputOptions, []);
+
+    childCompiler.context = parentCompiler.context;
+    childCompiler.inputFileSystem = parentCompiler.inputFileSystem;
+    childCompiler.outputFileSystem = parentCompiler.outputFileSystem;
+
+    if (Array.isArray(this.config.webpackCompilationPlugins)) {
+      for (const plugin of this.config.webpackCompilationPlugins) {
+        plugin.apply(childCompiler);
+      }
+    }
+
+    new webpack.EntryPlugin(parentCompiler.context, this.config.swSrc, this.constructor.name).apply(childCompiler);
+
+    await new Promise<void>((resolve, reject) => {
+      childCompiler.runAsChild((error, _entries, childCompilation) => {
+        if (error) {
+          reject(error);
+        } else {
+          compilation.warnings = compilation.warnings.concat(childCompilation?.warnings ?? []);
+          compilation.errors = compilation.errors.concat(childCompilation?.errors ?? []);
+
+          resolve();
+        }
+      });
+    });
+  }
+
+  /**
+   * @param compilation The webpack compilation.
+   * @param parentCompiler The webpack parent compiler.
+   *
+   * @private
+   */
+  addSrcToAssets(compilation: webpack.Compilation, parentCompiler: webpack.Compiler): void {
+    // eslint-disable-next-line
+    const source = (parentCompiler.inputFileSystem as any).readFileSync(this.config.swSrc);
+    compilation.emitAsset(this.config.swDest!, new webpack.sources.RawSource(source));
+  }
+
+  /**
+   * @param compilation The webpack compilation.
+   * @param parentCompiler The webpack parent compiler.
+   *
+   * @private
+   */
+  async handleMake(compilation: webpack.Compilation, parentCompiler: webpack.Compiler): Promise<void> {
+    this.config = await validateWebpackInjectManifestOptions(this.config);
+    this.config.swDest = relativeToOutputPath(compilation, this.config.swDest!);
+    _generatedAssetNames.add(this.config.swDest);
+
+    if (this.config.compileSrc) {
+      await this.performChildCompilation(compilation, parentCompiler);
+    } else {
+      this.addSrcToAssets(compilation, parentCompiler);
+      // This used to be a fatal error, but just warn at runtime because we
+      // can't validate it easily.
+      if (Array.isArray(this.config.webpackCompilationPlugins) && this.config.webpackCompilationPlugins.length > 0) {
+        compilation.warnings.push(
+          new Error("compileSrc is false, so the " + "webpackCompilationPlugins option will be ignored.") as webpack.WebpackError,
+        );
+      }
+    }
+  }
+
+  /**
+   * @param compilation The webpack compilation.
+   *
+   * @private
+   */
+  async addAssets(compilation: webpack.Compilation): Promise<void> {
+    const config = Object.assign({}, this.config);
+
+    const { size, sortedEntries, manifestString } = await this.getManifestEntries(compilation, config);
+
+    // See https://webpack.js.org/contribute/plugin-patterns/#monitoring-the-watch-graph
+    const absoluteSwSrc = upath.resolve(config.swSrc);
+    compilation.fileDependencies.add(absoluteSwSrc);
+
+    const swAsset = compilation.getAsset(config.swDest!);
+    const swAssetString = swAsset!.source.source().toString();
+
+    const globalRegexp = new RegExp(escapeRegExp(config.injectionPoint!), "g");
+    const injectionResults = swAssetString.match(globalRegexp);
+
+    if (!injectionResults) {
+      throw new Error(`Can't find ${config.injectionPoint} in your SW source.`);
+    }
+    if (injectionResults.length !== 1) {
+      throw new Error(
+        `Multiple instances of ${config.injectionPoint} were found in your SW source. Include it only once. For more info, see https://github.com/GoogleChrome/workbox/issues/2681`,
+      );
+    }
+
+    const sourcemapAssetName = getSourcemapAssetName(compilation, swAssetString, config.swDest!);
+
+    if (sourcemapAssetName) {
+      _generatedAssetNames.add(sourcemapAssetName);
+      const sourcemapAsset = compilation.getAsset(sourcemapAssetName);
+      const { source, map } = await replaceAndUpdateSourceMap({
+        jsFilename: config.swDest!,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        originalMap: JSON.parse(sourcemapAsset!.source.source().toString()),
+        originalSource: swAssetString,
+        replaceString: manifestString,
+        searchString: config.injectionPoint!,
+      });
+
+      compilation.updateAsset(sourcemapAssetName, new webpack.sources.RawSource(map));
+      compilation.updateAsset(config.swDest!, new webpack.sources.RawSource(source));
+    } else {
+      // If there's no sourcemap associated with swDest, a simple string
+      // replacement will suffice.
+      compilation.updateAsset(config.swDest!, new webpack.sources.RawSource(swAssetString.replace(config.injectionPoint!, manifestString)));
+    }
+
+    if (compilation.getLogger) {
+      const logger = compilation.getLogger(this.constructor.name);
+      logger.info(`The service worker at ${config.swDest ?? ""} will precache ${sortedEntries?.length ?? 0} URLs, totaling ${prettyBytes(size)}.`);
+    }
+  }
+}

package/src/lib/child-compilation-plugin.ts

@@ -0,0 +1,66 @@
+import type { Compilation, WebpackPluginInstance } from "webpack";
+import webpack from "webpack";
+
+import { relativeToOutputPath } from "./relative-to-output-path.js";
+
+export interface ChildCompilationPluginOptions {
+  src: string;
+  dest: string;
+  plugins?: WebpackPluginInstance[];
+}
+
+/**
+ * Compile a file by creating a child of the hooked compiler.
+ *
+ * @private
+ */
+export class ChildCompilationPlugin implements WebpackPluginInstance {
+  src: string;
+  dest: string;
+  plugins: WebpackPluginInstance[] | undefined;
+  constructor({ src, dest, plugins }: ChildCompilationPluginOptions) {
+    this.src = src;
+    this.dest = dest;
+    this.plugins = plugins;
+  }
+  apply(compiler: webpack.Compiler) {
+    compiler.hooks.make.tapPromise(this.constructor.name, (compilation) =>
+      this.performChildCompilation(compilation, compiler).catch((error: webpack.WebpackError) => {
+        compilation.errors.push(error);
+      }),
+    );
+  }
+  async performChildCompilation(compilation: webpack.Compilation, parentCompiler: webpack.Compiler): Promise<void> {
+    const resolvedDest = relativeToOutputPath(compilation, this.dest);
+    const outputOptions: Parameters<Compilation["createChildCompiler"]>["1"] = {
+      filename: resolvedDest,
+    };
+
+    const childCompiler = compilation.createChildCompiler(this.constructor.name, outputOptions, []);
+
+    childCompiler.context = parentCompiler.context;
+    childCompiler.inputFileSystem = parentCompiler.inputFileSystem;
+    childCompiler.outputFileSystem = parentCompiler.outputFileSystem;
+
+    if (this.plugins !== undefined) {
+      for (const plugin of this.plugins) {
+        plugin?.apply(childCompiler);
+      }
+    }
+
+    new webpack.EntryPlugin(parentCompiler.context, this.src, this.constructor.name).apply(childCompiler);
+
+    await new Promise<void>((resolve, reject) => {
+      childCompiler.runAsChild((error, _entries, childCompilation) => {
+        if (error) {
+          reject(error);
+        } else {
+          compilation.warnings = compilation.warnings.concat(childCompilation?.warnings ?? []);
+          compilation.errors = compilation.errors.concat(childCompilation?.errors ?? []);
+
+          resolve();
+        }
+      });
+    });
+  }
+}

package/src/lib/get-asset-hash.ts

@@ -0,0 +1,27 @@
+/*
+  Copyright 2018 Google LLC
+
+  Use of this source code is governed by an MIT-style
+  license that can be found in the LICENSE file or at
+  https://opensource.org/licenses/MIT.
+*/
+
+import crypto from "crypto";
+import type { Asset } from "webpack";
+
+/**
+ * @param asset
+ * @returns The MD5 hash of the asset's source.
+ *
+ * @private
+ */
+export const getAssetHash = (asset: Asset): string | null => {
+  // If webpack has the asset marked as immutable, then we don't need to
+  // use an out-of-band revision for it.
+  // See https://github.com/webpack/webpack/issues/9038
+  if (asset.info?.immutable) {
+    return null;
+  }
+
+  return crypto.createHash("md5").update(Buffer.from(asset.source.source())).digest("hex");
+};

package/src/lib/get-manifest-entries-from-compilation.ts

@@ -0,0 +1,214 @@
+/*
+  Copyright 2018 Google LLC
+
+  Use of this source code is governed by an MIT-style
+  license that can be found in the LICENSE file or at
+  https://opensource.org/licenses/MIT.
+*/
+
+import type { FileDetails, ManifestEntry, WebpackInjectManifestOptions } from "@serwist/build";
+import { transformManifest } from "@serwist/build";
+import type { Asset, Chunk, Compilation, WebpackError } from "webpack";
+import webpack from "webpack";
+
+import { getAssetHash } from "./get-asset-hash.js";
+import { resolveWebpackURL } from "./resolve-webpack-url.js";
+
+/**
+ * For a given asset, checks whether at least one of the conditions matches.
+ *
+ * @param asset The webpack asset in question. This will be passed
+ * to any functions that are listed as conditions.
+ * @param compilation The webpack compilation. This will be passed
+ * to any functions that are listed as conditions.
+ * @param conditions
+ * @returns Whether or not at least one condition matches.
+ * @private
+ */
+const checkConditions = (
+  asset: Asset,
+  compilation: Compilation,
+
+  conditions: Array<string | RegExp | ((arg0: any) => boolean)> = [],
+): boolean => {
+  for (const condition of conditions) {
+    if (typeof condition === "function") {
+      return condition({ asset, compilation });
+      //return compilation !== null;
+    }
+    if (webpack.ModuleFilenameHelpers.matchPart(asset.name, condition)) {
+      return true;
+    }
+  }
+
+  // We'll only get here if none of the conditions applied.
+  return false;
+};
+
+/**
+ * Returns the names of all the assets in all the chunks in a chunk group,
+ * if provided a chunk group name.
+ * Otherwise, if provided a chunk name, return all the assets in that chunk.
+ * Otherwise, if there isn't a chunk group or chunk with that name, return null.
+ *
+ * @param compilation
+ * @param chunkOrGroup
+ * @returns
+ * @private
+ */
+const getNamesOfAssetsInChunkOrGroup = (compilation: Compilation, chunkOrGroup: string): string[] | null => {
+  const chunkGroup = compilation.namedChunkGroups?.get(chunkOrGroup);
+  if (chunkGroup) {
+    const assetNames = [];
+    for (const chunk of chunkGroup.chunks) {
+      assetNames.push(...getNamesOfAssetsInChunk(chunk));
+    }
+    return assetNames;
+  }
+  const chunk = compilation.namedChunks?.get(chunkOrGroup);
+  if (chunk) {
+    return getNamesOfAssetsInChunk(chunk);
+  }
+
+  // If we get here, there's no chunkGroup or chunk with that name.
+  return null;
+};
+
+/**
+ * Returns the names of all the assets in a chunk.
+ *
+ * @param chunk
+ * @returns
+ * @private
+ */
+const getNamesOfAssetsInChunk = (chunk: Chunk): string[] => {
+  const assetNames: string[] = [];
+
+  assetNames.push(...chunk.files);
+
+  // This only appears to be set in webpack v5.
+  if (chunk.auxiliaryFiles) {
+    assetNames.push(...chunk.auxiliaryFiles);
+  }
+
+  return assetNames;
+};
+
+/**
+ * Filters the set of assets out, based on the configuration options provided:
+ * - chunks and excludeChunks, for chunkName-based criteria.
+ * - include and exclude, for more general criteria.
+ *
+ * @param compilation The webpack compilation.
+ * @param config The validated configuration, obtained from the plugin.
+ * @returns The assets that should be included in the manifest,
+ * based on the criteria provided.
+ * @private
+ */
+const filterAssets = (compilation: Compilation, config: WebpackInjectManifestOptions): Set<Asset> => {
+  const filteredAssets = new Set<Asset>();
+  const assets = compilation.getAssets();
+
+  const allowedAssetNames = new Set<string>();
+  // See https://github.com/GoogleChrome/workbox/issues/1287
+  if (Array.isArray(config.chunks)) {
+    for (const name of config.chunks) {
+      // See https://github.com/GoogleChrome/workbox/issues/2717
+      const assetsInChunkOrGroup = getNamesOfAssetsInChunkOrGroup(compilation, name);
+      if (assetsInChunkOrGroup) {
+        for (const assetName of assetsInChunkOrGroup) {
+          allowedAssetNames.add(assetName);
+        }
+      } else {
+        compilation.warnings.push(
+          new Error(`The chunk '${name}' was provided in your Serwist chunks config, but was not found in the compilation.`) as WebpackError,
+        );
+      }
+    }
+  }
+
+  const deniedAssetNames = new Set();
+  if (Array.isArray(config.excludeChunks)) {
+    for (const name of config.excludeChunks) {
+      // See https://github.com/GoogleChrome/workbox/issues/2717
+      const assetsInChunkOrGroup = getNamesOfAssetsInChunkOrGroup(compilation, name);
+      if (assetsInChunkOrGroup) {
+        for (const assetName of assetsInChunkOrGroup) {
+          deniedAssetNames.add(assetName);
+        }
+      } // Don't warn if the chunk group isn't found.
+    }
+  }
+
+  for (const asset of assets) {
+    // chunk based filtering is funky because:
+    // - Each asset might belong to one or more chunks.
+    // - If *any* of those chunk names match our config.excludeChunks,
+    //   then we skip that asset.
+    // - If the config.chunks is defined *and* there's no match
+    //   between at least one of the chunkNames and one entry, then
+    //   we skip that assets as well.
+
+    if (deniedAssetNames.has(asset.name)) {
+      continue;
+    }
+
+    if (Array.isArray(config.chunks) && !allowedAssetNames.has(asset.name)) {
+      continue;
+    }
+
+    // Next, check asset-level checks via includes/excludes:
+    const isExcluded = checkConditions(asset, compilation, config.exclude);
+    if (isExcluded) {
+      continue;
+    }
+
+    // Treat an empty config.includes as an implicit inclusion.
+    const isIncluded = !Array.isArray(config.include) || checkConditions(asset, compilation, config.include);
+    if (!isIncluded) {
+      continue;
+    }
+
+    // If we've gotten this far, then add the asset.
+    filteredAssets.add(asset);
+  }
+
+  return filteredAssets;
+};
+
+export const getManifestEntriesFromCompilation = async (
+  compilation: Compilation,
+  config: WebpackInjectManifestOptions,
+): Promise<{ size: number; sortedEntries: ManifestEntry[] | undefined }> => {
+  const filteredAssets = filterAssets(compilation, config);
+
+  const { publicPath } = compilation.options.output;
+
+  const fileDetails = Array.from(filteredAssets).map((asset) => {
+    return {
+      file: resolveWebpackURL(publicPath as string, asset.name),
+      hash: getAssetHash(asset),
+      size: asset.source.size() || 0,
+    } as FileDetails;
+  });
+
+  const { manifestEntries, size, warnings } = await transformManifest({
+    fileDetails,
+    additionalPrecacheEntries: config.additionalPrecacheEntries,
+    dontCacheBustURLsMatching: config.dontCacheBustURLsMatching,
+    manifestTransforms: config.manifestTransforms,
+    maximumFileSizeToCacheInBytes: config.maximumFileSizeToCacheInBytes,
+    modifyURLPrefix: config.modifyURLPrefix,
+    transformParam: compilation,
+  });
+
+  // See https://github.com/GoogleChrome/workbox/issues/2790
+  for (const warning of warnings) {
+    compilation.warnings.push(new Error(warning) as WebpackError);
+  }
+
+  // Ensure that the entries are properly sorted by URL.
+  const sortedEntries = manifestEntries?.sort((a, b) => (a.url === b.url ? 0 : a.url > b.url ? 1 : -1));
+
+  return { size, sortedEntries };
+};

package/src/lib/get-script-files-for-chunks.ts

@@ -0,0 +1,38 @@
+/*
+  Copyright 2019 Google LLC
+
+  Use of this source code is governed by an MIT-style
+  license that can be found in the LICENSE file or at
+  https://opensource.org/licenses/MIT.
+*/
+
+import upath from "upath";
+import type { Compilation, WebpackError } from "webpack";
+
+import { resolveWebpackURL } from "./resolve-webpack-url.js";
+
+export const getScriptFilesForChunks = (compilation: Compilation, chunkNames: string[]): string[] => {
+  const { chunks } = compilation.getStats().toJson({ chunks: true });
+  const { publicPath } = compilation.options.output;
+  const scriptFiles = new Set<string>();
+
+  for (const chunkName of chunkNames) {
+    const chunk = chunks!.find((chunk) => chunk.names?.includes(chunkName));
+    if (chunk) {
+      for (const file of chunk?.files ?? []) {
+        // See https://github.com/GoogleChrome/workbox/issues/2161
+        if (upath.extname(file) === ".js") {
+          scriptFiles.add(resolveWebpackURL(publicPath as string, file));
+        }
+      }
+    } else {
+      compilation.warnings.push(new Error(`${chunkName} was provided to importScriptsViaChunks, but didn't match any named chunks.`) as WebpackError);
+    }
+  }
+
+  if (scriptFiles.size === 0) {
+    compilation.warnings.push(new Error(`There were no assets matching importScriptsViaChunks: [${chunkNames.join(" ")}].`) as WebpackError);
+  }
+
+  return Array.from(scriptFiles);
+};

package/src/lib/get-sourcemap-asset-name.ts

@@ -0,0 +1,47 @@
+/*
+  Copyright 2019 Google LLC
+
+  Use of this source code is governed by an MIT-style
+  license that can be found in the LICENSE file or at
+  https://opensource.org/licenses/MIT.
+*/
+
+import { getSourceMapURL } from "@serwist/build";
+import upath from "upath";
+import type { Compilation } from "webpack";
+
+/**
+ * If our bundled swDest file contains a sourcemap, we would invalidate that
+ * mapping if we just replaced injectionPoint with the stringified manifest.
+ * Instead, we need to update the swDest contents as well as the sourcemap
+ * at the same time.
+ *
+ * See https://github.com/GoogleChrome/workbox/issues/2235
+ *
+ * @param compilation The current webpack compilation.
+ * @param swContents The contents of the swSrc file, which may or
+ * may not include a valid sourcemap comment.
+ * @param swDest The configured swDest value.
+ * @returns If the swContents contains a valid sourcemap
+ * comment pointing to an asset present in the compilation, this will return the
+ * name of that asset. Otherwise, it will return undefined.
+ * @private
+ */
+export const getSourcemapAssetName = (compilation: Compilation, swContents: string, swDest: string): string | undefined => {
+  const url = getSourceMapURL(swContents);
+  if (url) {
+    // Translate the relative URL to what the presumed name for the webpack
+    // asset should be.
+    // This *might* not be a valid asset if the sourcemap URL that was found
+    // was added by another module incidentally.
+    // See https://github.com/GoogleChrome/workbox/issues/2250
+    const swAssetDirname = upath.dirname(swDest);
+    const sourcemapURLAssetName = upath.normalize(upath.join(swAssetDirname, url));
+
+    // Not sure if there's a better way to check for asset existence?
+    if (compilation.getAsset(sourcemapURLAssetName)) {
+      return sourcemapURLAssetName;
+    }
+  }
+  return undefined;
+};