inject-manifest.js
11.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
"use strict";
/*
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.
*/
const {
RawSource
} = require('webpack-sources');
const {
SingleEntryPlugin
} = require('webpack');
const replaceAndUpdateSourceMap = require('workbox-build/build/lib/replace-and-update-source-map');
const stringify = require('fast-json-stable-stringify');
const upath = require('upath');
const validate = require('workbox-build/build/lib/validate-options');
const webpackInjectManifestSchema = require('workbox-build/build/options/schema/webpack-inject-manifest');
const getManifestEntriesFromCompilation = require('./lib/get-manifest-entries-from-compilation');
const getSourcemapAssetName = require('./lib/get-sourcemap-asset-name');
const relativeToOutputPath = require('./lib/relative-to-output-path'); // 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();
/**
* 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.
*
* @memberof module:workbox-webpack-plugin
*/
class InjectManifest {
// eslint-disable-next-line jsdoc/newline-after-description
/**
* Creates an instance of InjectManifest.
*
* @param {Object} config The configuration to use.
*
* @param {string} config.swSrc An existing service worker file that will be
* compiled and have a precache manifest injected into it.
*
* @param {Array<module:workbox-build.ManifestEntry>} [config.additionalManifestEntries]
* A list of entries to be precached, in addition to any entries that are
* generated as part of the build configuration.
*
* @param {Array<string>} [config.chunks] One or more chunk names whose corresponding
* output files should be included in the precache manifest.
*
* @param {boolean} [config.compileSrc=true] When `true` (the default), the
* `swSrc` file will be compiled by webpack. When `false`, compilation will
* not occur (and `webpackCompilationPlugins` can't be used.) Set to `false`
* if you want to inject the manifest into, e.g., a JSON file.
*
* @param {RegExp} [config.dontCacheBustURLsMatching] Assets that match this will be
* assumed to be uniquely versioned via their URL, and exempted from the normal
* HTTP cache-busting that's done when populating the precache. While not
* required, it's recommended that if your existing build process already
* inserts a `[hash]` value into each filename, you provide a RegExp that will
* detect that, as it will reduce the bandwidth consumed when precaching.
*
* @param {Array<string|RegExp|Function>} [config.exclude=[/\.map$/, /^manifest.*\.js$]]
* One or more specifiers used to exclude assets from the precache manifest.
* This is interpreted following
* [the same rules](https://webpack.js.org/configuration/module/#condition)
* as `webpack`'s standard `exclude` option.
*
* @param {Array<string>} [config.importScriptsViaChunks] One or more names of
* webpack chunks. The content of those chunks will be included in the
* generated service worker, via a call to `importScripts()`.
*
* @param {Array<string>} [config.excludeChunks] One or more chunk names whose
* corresponding output files should be excluded from the precache manifest.
*
* @param {Array<string|RegExp|Function>} [config.include]
* One or more specifiers used to include assets in the precache manifest.
* This is interpreted following
* [the same rules](https://webpack.js.org/configuration/module/#condition)
* as `webpack`'s standard `include` option.
*
* @param {string} [config.injectionPoint='self.__WB_MANIFEST'] The string to
* find inside of the `swSrc` file. Once found, it will be replaced by the
* generated precache manifest.
*
* @param {Array<module:workbox-build.ManifestTransform>} [config.manifestTransforms]
* One or more functions which will be applied sequentially against the
* generated manifest. If `modifyURLPrefix` or `dontCacheBustURLsMatching` are
* also specified, their corresponding transformations will be applied first.
*
* @param {number} [config.maximumFileSizeToCacheInBytes=2097152] This value can be
* used to determine the maximum size of files that will be precached. This
* prevents you from inadvertently precaching very large files that might have
* accidentally matched one of your patterns.
*
* @param {string} [config.mode] If set to 'production', then an optimized service
* worker bundle that excludes debugging info will be produced. If not explicitly
* configured here, the `mode` value configured in the current `webpack`
* compilation will be used.
*
* @param {object<string, string>} [config.modifyURLPrefix] A mapping of prefixes
* that, if present in an entry in the precache manifest, will be replaced with
* the corresponding value. This can be used to, for example, remove or add a
* path prefix from a manifest entry if your web hosting setup doesn't match
* your local filesystem setup. As an alternative with more flexibility, you can
* use the `manifestTransforms` option and provide a function that modifies the
* entries in the manifest using whatever logic you provide.
*
* @param {string} [config.swDest] The asset name of the
* service worker file that will be created by this plugin. If omitted, the
* name will be based on the `swSrc` name.
*
* @param {Array<Object>} [config.webpackCompilationPlugins] Optional `webpack`
* plugins that will be used when compiling the `swSrc` input file.
*/
constructor(config = {}) {
this.config = config;
this.alreadyCalled = false;
}
/**
* @param {Object} [compiler] default compiler object passed from webpack
*
* @private
*/
propagateWebpackConfig(compiler) {
// 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.mode
}, this.config);
}
/**
* @param {Object} [compiler] default compiler object passed from webpack
*
* @private
*/
apply(compiler) {
this.propagateWebpackConfig(compiler);
compiler.hooks.make.tapPromise(this.constructor.name, compilation => this.handleMake(compilation, compiler).catch(error => compilation.errors.push(error)));
compiler.hooks.emit.tapPromise(this.constructor.name, compilation => this.handleEmit(compilation).catch(error => compilation.errors.push(error)));
}
/**
* @param {Object} compilation The webpack compilation.
* @param {Object} parentCompiler The webpack parent compiler.
*
* @private
*/
async performChildCompilation(compilation, parentCompiler) {
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.apply(childCompiler);
}
}
new SingleEntryPlugin(parentCompiler.context, this.config.swSrc, this.constructor.name).apply(childCompiler);
await new Promise((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, parentCompiler) {
const source = parentCompiler.inputFileSystem.readFileSync(this.config.swSrc).toString();
compilation.assets[this.config.swDest] = new RawSource(source);
}
/**
* @param {Object} compilation The webpack compilation.
* @param {Object} parentCompiler The webpack parent compiler.
*
* @private
*/
async handleMake(compilation, parentCompiler) {
try {
this.config = validate(this.config, webpackInjectManifestSchema);
} catch (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);
}
}
/**
* @param {Object} compilation The webpack compilation.
*
* @private
*/
async handleEmit(compilation) {
// See https://github.com/GoogleChrome/workbox/issues/1790
if (this.alreadyCalled) {
compilation.warnings.push(`${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.`);
} 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.
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.assets[config.swDest];
const initialSWAssetString = swAsset.source();
if (!initialSWAssetString.includes(config.injectionPoint)) {
throw new Error(`Can't find ${config.injectionPoint} in your SW source.`);
}
const manifestEntries = await getManifestEntriesFromCompilation(compilation, config);
let manifestString = stringify(manifestEntries);
if (this.config.compileSrc) {
// See https://github.com/GoogleChrome/workbox/issues/2263
manifestString = manifestString.replace(/"/g, `'`);
}
const sourcemapAssetName = getSourcemapAssetName(compilation, initialSWAssetString, config.swDest);
if (sourcemapAssetName) {
const sourcemapAsset = compilation.assets[sourcemapAssetName];
const {
source,
map
} = await replaceAndUpdateSourceMap({
jsFilename: config.swDest,
originalMap: JSON.parse(sourcemapAsset.source()),
originalSource: initialSWAssetString,
replaceString: manifestString,
searchString: config.injectionPoint
});
compilation.assets[sourcemapAssetName] = new RawSource(map);
compilation.assets[config.swDest] = new RawSource(source);
} else {
// If there's no sourcemap associated with swDest, a simple string
// replacement will suffice.
compilation.assets[config.swDest] = new RawSource(initialSWAssetString.replace(config.injectionPoint, manifestString));
}
}
}
module.exports = InjectManifest;