123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371 |
- /*
- 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 {escapeRegExp} from 'workbox-build/build/lib/escape-regexp';
- import {replaceAndUpdateSourceMap} from 'workbox-build/build/lib/replace-and-update-source-map';
- import {validateWebpackInjectManifestOptions} from 'workbox-build/build/lib/validate-options';
- import prettyBytes from 'pretty-bytes';
- import stringify from 'fast-json-stable-stringify';
- import upath from 'upath';
- import webpack from 'webpack';
- import {getManifestEntriesFromCompilation} from './lib/get-manifest-entries-from-compilation';
- import {getSourcemapAssetName} from './lib/get-sourcemap-asset-name';
- import {relativeToOutputPath} from './lib/relative-to-output-path';
- import {WebpackInjectManifestOptions} from 'workbox-build';
- // 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>();
- // SingleEntryPlugin in v4 was renamed to EntryPlugin in v5.
- const SingleEntryPlugin = webpack.EntryPlugin || webpack.SingleEntryPlugin;
- // webpack v4/v5 compatibility:
- // https://github.com/webpack/webpack/issues/11425#issuecomment-686607633
- const {RawSource} = webpack.sources || require('webpack-sources');
- /**
- * 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: '...',
- * });
- * ```
- *
- * @memberof module:workbox-webpack-plugin
- */
- class InjectManifest {
- protected config: WebpackInjectManifestOptions;
- private alreadyCalled: boolean;
- /**
- * Creates an instance of InjectManifest.
- */
- constructor(config: WebpackInjectManifestOptions) {
- this.config = config;
- this.alreadyCalled = false;
- }
- /**
- * @param {Object} [compiler] default compiler object passed from webpack
- *
- * @private
- */
- propagateWebpackConfig(compiler: webpack.Compiler): void {
- // 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: upath.parse(this.config.swSrc).name + '.js',
- },
- this.config,
- );
- }
- /**
- * @param {Object} [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);
- },
- ),
- );
- // webpack v4/v5 compatibility:
- // https://github.com/webpack/webpack/issues/11425#issuecomment-690387207
- if (webpack.version?.startsWith('4.')) {
- compiler.hooks.emit.tapPromise(this.constructor.name, (compilation) =>
- this.addAssets(compilation).catch((error: webpack.WebpackError) => {
- compilation.errors.push(error);
- }),
- );
- } else {
- 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 {Object} compilation The webpack compilation.
- * @param {Object} parentCompiler The webpack parent compiler.
- *
- * @private
- */
- async performChildCompilation(
- compilation: webpack.Compilation,
- parentCompiler: webpack.Compiler,
- ): Promise<void> {
- const outputOptions = {
- path: parentCompiler.options.output.path,
- 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 has a generic type, eslint complains for an unsafe
- // assign and unsafe use
- // eslint-disable-next-line
- plugin.apply(childCompiler);
- }
- }
- new SingleEntryPlugin(
- 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 {Object} compilation The webpack compilation.
- * @param {Object} 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 RawSource(source));
- }
- /**
- * @param {Object} compilation The webpack compilation.
- * @param {Object} parentCompiler The webpack parent compiler.
- *
- * @private
- */
- async handleMake(
- compilation: webpack.Compilation,
- parentCompiler: webpack.Compiler,
- ): Promise<void> {
- try {
- this.config = validateWebpackInjectManifestOptions(this.config);
- } catch (error) {
- if (error instanceof Error) {
- throw new Error(
- `Please check your ${this.constructor.name} plugin ` +
- `configuration:\n${error.message}`,
- );
- }
- }
- 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 {Object} compilation The webpack compilation.
- *
- * @private
- */
- async addAssets(compilation: webpack.Compilation): Promise<void> {
- // 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;
- }
- const config = Object.assign({}, this.config);
- // 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));
- // See https://webpack.js.org/contribute/plugin-patterns/#monitoring-the-watch-graph
- const absoluteSwSrc = upath.resolve(this.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 {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, `'`);
- }
- 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 RawSource(map));
- compilation.updateAsset(config.swDest!, new RawSource(source));
- } else {
- // If there's no sourcemap associated with swDest, a simple string
- // replacement will suffice.
- compilation.updateAsset(
- config.swDest!,
- new 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} URLs, totaling ${prettyBytes(size)}.`);
- }
- }
- }
- export {InjectManifest};
|