webpack · piotr-oles · Nov 8, 2021 · Nov 8, 2021 · Nov 8, 2021 · Nov 8, 2021
diff --git a/declarations/WebpackOptions.d.ts b/declarations/WebpackOptions.d.ts
@@ -1027,6 +1027,10 @@ export interface EntryDescription {
 	 * The method of loading chunks (methods included by default are 'jsonp' (web), 'import' (ESM), 'importScripts' (WebWorker), 'require' (sync node.js), 'async-node' (async node.js), but others might be added by plugins).
 	 */
 	chunkLoading?: ChunkLoading;
+	/**
+	 * Use cross-origin loading technique for this entry.
+	 */
+	crossOriginLoading?: boolean;
 	/**
 	 * The entrypoints that the current entrypoint depend on. They must be loaded when this entrypoint is loaded.
 	 */
@@ -2124,6 +2128,10 @@ export interface Output {
 	 * The method of loading chunks (methods included by default are 'jsonp' (web), 'import' (ESM), 'importScripts' (WebWorker), 'require' (sync node.js), 'async-node' (async node.js), but others might be added by plugins).
 	 */
 	workerChunkLoading?: ChunkLoading;
+	/**
+	 * This option enables cross-origin loading of workers.
+	 */
+	workerCrossOriginLoading?: boolean;
 	/**
 	 * The method of loading WebAssembly Modules (methods included by default are 'fetch' (web/WebWorker), 'async-node' (node.js), but others might be added by plugins).
 	 */
@@ -2704,6 +2712,10 @@ export interface EntryDescriptionNormalized {
 	 * The method of loading chunks (methods included by default are 'jsonp' (web), 'import' (ESM), 'importScripts' (WebWorker), 'require' (sync node.js), 'async-node' (async node.js), but others might be added by plugins).
 	 */
 	chunkLoading?: ChunkLoading;
+	/**
+	 * Use cross-origin loading technique for this entry.
+	 */
+	crossOriginLoading?: boolean;
 	/**
 	 * The entrypoints that the current entrypoint depend on. They must be loaded when this entrypoint is loaded.
 	 */
@@ -3240,6 +3252,10 @@ export interface OutputNormalized {
 	 * The method of loading chunks (methods included by default are 'jsonp' (web), 'import' (ESM), 'importScripts' (WebWorker), 'require' (sync node.js), 'async-node' (async node.js), but others might be added by plugins).
 	 */
 	workerChunkLoading?: ChunkLoading;
+	/**
+	 * This option enables cross-origin loading of workers.
+	 */
+	workerCrossOriginLoading?: boolean;
 	/**
 	 * The method of loading WebAssembly Modules (methods included by default are 'fetch' (web/WebWorker), 'async-node' (node.js), but others might be added by plugins).
 	 */

diff --git a/lib/RuntimeGlobals.js b/lib/RuntimeGlobals.js
@@ -175,6 +175,12 @@ exports.loadScript = "__webpack_require__.l";
  */
 exports.createScriptUrl = "__webpack_require__.tu";
 
+/**
+ * function to create blob url for cross-origin loading
+ * Arguments: (code: string) => URL
+ */
+exports.createScriptBlob = "__webpack_require__.sb";
+
 /**
  * the chunk name of the chunk with the runtime
  */
@@ -333,6 +339,11 @@ exports.systemContext = "__webpack_require__.y";
  */
 exports.baseURI = "__webpack_require__.b";
 
+/**
+ * the url of current script
+ */
+exports.scriptUrl = "__webpack_require__.su";
+
 /**
  * a RelativeURL class when relative URLs are used
  */

diff --git a/lib/RuntimePlugin.js b/lib/RuntimePlugin.js
@@ -13,8 +13,10 @@ const AutoPublicPathRuntimeModule = require("./runtime/AutoPublicPathRuntimeModu
 const CompatGetDefaultExportRuntimeModule = require("./runtime/CompatGetDefaultExportRuntimeModule");
 const CompatRuntimeModule = require("./runtime/CompatRuntimeModule");
 const CreateFakeNamespaceObjectRuntimeModule = require("./runtime/CreateFakeNamespaceObjectRuntimeModule");
+const CreateScriptBlobRuntimeModule = require("./runtime/CreateScriptBlobRuntimeModule");
 const CreateScriptUrlRuntimeModule = require("./runtime/CreateScriptUrlRuntimeModule");
 const DefinePropertyGettersRuntimeModule = require("./runtime/DefinePropertyGettersRuntimeModule");
+const DetectScriptUrlRuntimeModule = require("./runtime/DetectScriptUrlRuntimeModule");
 const EnsureChunkRuntimeModule = require("./runtime/EnsureChunkRuntimeModule");
 const GetChunkFilenameRuntimeModule = require("./runtime/GetChunkFilenameRuntimeModule");
 const GetMainFilenameRuntimeModule = require("./runtime/GetMainFilenameRuntimeModule");
@@ -53,6 +55,7 @@ const GLOBALS_ON_REQUIRE = [
 	RuntimeGlobals.publicPath,
 	RuntimeGlobals.baseURI,
 	RuntimeGlobals.relativeUrl,
+	RuntimeGlobals.scriptUrl,
 	RuntimeGlobals.scriptNonce,
 	RuntimeGlobals.uncaughtErrorHandler,
 	RuntimeGlobals.asyncModule,
@@ -186,6 +189,7 @@ class RuntimePlugin {
 							: globalPublicPath;
 
 					if (publicPath === "auto") {
+						set.add(RuntimeGlobals.scriptUrl);
 						const module = new AutoPublicPathRuntimeModule();
 						if (scriptType !== "module") set.add(RuntimeGlobals.global);
 						compilation.addRuntimeModule(chunk, module);
@@ -348,12 +352,31 @@ class RuntimePlugin {
 					);
 					return true;
 				});
+			compilation.hooks.runtimeRequirementInTree
+				.for(RuntimeGlobals.createScriptBlob)
+				.tap("RuntimePlugin", (chunk, set) => {
+					compilation.addRuntimeModule(
+						chunk,
+						new CreateScriptBlobRuntimeModule()
+					);
+					return true;
+				});
 			compilation.hooks.runtimeRequirementInTree
 				.for(RuntimeGlobals.relativeUrl)
 				.tap("RuntimePlugin", (chunk, set) => {
 					compilation.addRuntimeModule(chunk, new RelativeUrlRuntimeModule());
 					return true;
 				});
+			compilation.hooks.runtimeRequirementInTree
+				.for(RuntimeGlobals.scriptUrl)
+				.tap("RuntimePlugin", (chunk, set) => {
+					set.add(RuntimeGlobals.global);
+					compilation.addRuntimeModule(
+						chunk,
+						new DetectScriptUrlRuntimeModule()
+					);
+					return true;
+				});
 			compilation.hooks.runtimeRequirementInTree
 				.for(RuntimeGlobals.onChunksLoaded)
 				.tap("RuntimePlugin", (chunk, set) => {

diff --git a/lib/WebpackOptionsApply.js b/lib/WebpackOptionsApply.js
@@ -325,6 +325,7 @@ class WebpackOptionsApply extends OptionsApply {
 		new URLPlugin().apply(compiler);
 		new WorkerPlugin(
 			options.output.workerChunkLoading,
+			options.output.workerCrossOriginLoading,
 			options.output.workerWasmLoading,
 			options.output.module
 		).apply(compiler);

diff --git a/lib/config/defaults.js b/lib/config/defaults.js
@@ -806,6 +806,7 @@ const applyOutputDefaults = (
 		}
 		return false;
 	});
+	D(output, "workerCrossOriginLoading", false);
 	F(output, "workerWasmLoading", () => output.wasmLoading);
 	F(output, "devtoolNamespace", () => output.uniqueName);
 	if (output.library) {

diff --git a/lib/config/normalization.js b/lib/config/normalization.js
@@ -366,6 +366,7 @@ const getNormalizedWebpackOptions = config => {
 				wasmLoading: output.wasmLoading,
 				webassemblyModuleFilename: output.webassemblyModuleFilename,
 				workerChunkLoading: output.workerChunkLoading,
+				workerCrossOriginLoading: output.workerCrossOriginLoading,
 				workerWasmLoading: output.workerWasmLoading
 			};
 			return result;

diff --git a/lib/dependencies/WorkerDependency.js b/lib/dependencies/WorkerDependency.js
@@ -25,10 +25,12 @@ class WorkerDependency extends ModuleDependency {
 	/**
 	 * @param {string} request request
 	 * @param {[number, number]} range range
+	 * @param {boolean} crossOriginLoading Use cross-origin loading
 	 */
-	constructor(request, range) {
+	constructor(request, range, crossOriginLoading) {
 		super(request);
 		this.range = range;
+		this.crossOriginLoading = crossOriginLoading;
 	}
 
 	/**
@@ -60,7 +62,8 @@ WorkerDependency.Template = class WorkerDependencyTemplate extends (
 	 * @returns {void}
 	 */
 	apply(dependency, source, templateContext) {
-		const { chunkGraph, moduleGraph, runtimeRequirements } = templateContext;
+		const { chunkGraph, moduleGraph, runtimeRequirements, runtimeTemplate } =
+			templateContext;
 		const dep = /** @type {WorkerDependency} */ (dependency);
 		const block = /** @type {AsyncDependenciesBlock} */ (
 			moduleGraph.getParentBlock(dependency)
@@ -71,16 +74,39 @@ WorkerDependency.Template = class WorkerDependencyTemplate extends (
 		const chunk = entrypoint.getEntrypointChunk();
 
 		runtimeRequirements.add(RuntimeGlobals.publicPath);
-		runtimeRequirements.add(RuntimeGlobals.baseURI);
 		runtimeRequirements.add(RuntimeGlobals.getChunkScriptFilename);
 
-		source.replace(
-			dep.range[0],
-			dep.range[1] - 1,
-			`/* worker import */ ${RuntimeGlobals.publicPath} + ${
-				RuntimeGlobals.getChunkScriptFilename
-			}(${JSON.stringify(chunk.id)}), ${RuntimeGlobals.baseURI}`
-		);
+		const workerUrlTemplate = `${RuntimeGlobals.publicPath} + ${
+			RuntimeGlobals.getChunkScriptFilename
+		}(${JSON.stringify(chunk.id)})`;
+
+		if (dep.crossOriginLoading) {
+			runtimeRequirements.add(RuntimeGlobals.scriptUrl);
+			runtimeRequirements.add(RuntimeGlobals.createScriptBlob);
+
+			const baseUriTemplate = `JSON.stringify(${RuntimeGlobals.scriptUrl})`;
+			const scriptUrlTemplate = `JSON.stringify(new URL(${workerUrlTemplate}, ${RuntimeGlobals.scriptUrl}))`;
+			const crossOriginLoaderTemplate = [
+				`"self.__webpack_base_uri__=" + ${baseUriTemplate} + ";`,
+				runtimeTemplate.isModule()
+					? `import " + ${scriptUrlTemplate} + ";"`
+					: `importScripts(" + ${scriptUrlTemplate} + ");"`
+			].join("");
+
+			source.replace(
+				dep.range[0],
+				dep.range[1] - 1,
+				`/* worker import */ ${RuntimeGlobals.createScriptBlob}(${crossOriginLoaderTemplate})`
+			);
+		} else {
+			runtimeRequirements.add(RuntimeGlobals.baseURI);
+
+			source.replace(
+				dep.range[0],
+				dep.range[1] - 1,
+				`/* worker import */ ${workerUrlTemplate}, ${RuntimeGlobals.baseURI}`
+			);
+		}
 	}
 };
 

diff --git a/lib/dependencies/WorkerPlugin.js b/lib/dependencies/WorkerPlugin.js
@@ -26,6 +26,9 @@ const WorkerDependency = require("./WorkerDependency");
 /** @typedef {import("estree").Pattern} Pattern */
 /** @typedef {import("estree").Property} Property */
 /** @typedef {import("estree").SpreadElement} SpreadElement */
+/** @typedef {import("../../declarations/WebpackOptions").ChunkLoading} ChunkLoading */
+/** @typedef {import("../../declarations/WebpackOptions").OutputModule} OutputModule */
+/** @typedef {import("../../declarations/WebpackOptions").WasmLoading} WasmLoading */
 /** @typedef {import("../Compiler")} Compiler */
 /** @typedef {import("../Entrypoint").EntryOptions} EntryOptions */
 /** @typedef {import("../Parser").ParserState} ParserState */
@@ -48,8 +51,15 @@ const DEFAULT_SYNTAX = [
 const workerIndexMap = new WeakMap();
 
 class WorkerPlugin {
-	constructor(chunkLoading, wasmLoading, module) {
+	/**
+	 * @param {ChunkLoading} chunkLoading The method of loading chunks.
+	 * @param {boolean} crossOriginLoading This option enables cross-origin loading of workers.
+	 * @param {WasmLoading} wasmLoading The method of loading WebAssembly Modules.
+	 * @param {OutputModule} module Output javascript files as module source type.
+	 */
+	constructor(chunkLoading, crossOriginLoading, wasmLoading, module) {
 		this._chunkLoading = chunkLoading;
+		this._crossOriginLoading = crossOriginLoading;
 		this._wasmLoading = wasmLoading;
 		this._module = module;
 	}
@@ -292,11 +302,16 @@ class WorkerPlugin {
 							entryOptions: {
 								chunkLoading: this._chunkLoading,
 								wasmLoading: this._wasmLoading,
+								crossOriginLoading: this._crossOriginLoading,
 								...entryOptions
 							}
 						});
 						block.loc = expr.loc;
-						const dep = new WorkerDependency(url.string, range);
+						const dep = new WorkerDependency(
+							url.string,
+							range,
+							this._crossOriginLoading
+						);
 						dep.loc = expr.loc;
 						block.addDependency(dep);
 						parser.state.module.addBlock(block);

diff --git a/lib/runtime/AutoPublicPathRuntimeModule.js b/lib/runtime/AutoPublicPathRuntimeModule.js
@@ -7,8 +7,6 @@
 const RuntimeGlobals = require("../RuntimeGlobals");
 const RuntimeModule = require("../RuntimeModule");
 const Template = require("../Template");
-const JavascriptModulesPlugin = require("../javascript/JavascriptModulesPlugin");
-const { getUndoPath } = require("../util/identifier");
 
 class AutoPublicPathRuntimeModule extends RuntimeModule {
 	constructor() {
@@ -19,49 +17,12 @@ class AutoPublicPathRuntimeModule extends RuntimeModule {
 	 * @returns {string} runtime code
 	 */
 	generate() {
-		const { compilation } = this;
-		const { scriptType, importMetaName, path } = compilation.outputOptions;
-		const chunkName = compilation.getPath(
-			JavascriptModulesPlugin.getChunkFilenameTemplate(
-				this.chunk,
-				compilation.outputOptions
-			),
-			{
-				chunk: this.chunk,
-				contentHashType: "javascript"
-			}
-		);
-		const undoPath = getUndoPath(chunkName, path, false);
-
 		return Template.asString([
-			"var scriptUrl;",
-			scriptType === "module"
-				? `if (typeof ${importMetaName}.url === "string") scriptUrl = ${importMetaName}.url`
-				: Template.asString([
-						`if (${RuntimeGlobals.global}.importScripts) scriptUrl = ${RuntimeGlobals.global}.location + "";`,
-						`var document = ${RuntimeGlobals.global}.document;`,
-						"if (!scriptUrl && document) {",
-						Template.indent([
-							`if (document.currentScript)`,
-							Template.indent(`scriptUrl = document.currentScript.src`),
-							"if (!scriptUrl) {",
-							Template.indent([
-								'var scripts = document.getElementsByTagName("script");',
-								"if(scripts.length) scriptUrl = scripts[scripts.length - 1].src"
-							]),
-							"}"
-						]),
-						"}"
-				  ]),
+			`var scriptUrl = ${RuntimeGlobals.scriptUrl};`,
 			"// When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration",
 			'// or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic.',
 			'if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser");',
-			'scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\\?.*$/, "").replace(/\\/[^\\/]+$/, "/");',
-			!undoPath
-				? `${RuntimeGlobals.publicPath} = scriptUrl;`
-				: `${RuntimeGlobals.publicPath} = scriptUrl + ${JSON.stringify(
-						undoPath
-				  )};`
+			`${RuntimeGlobals.publicPath} = scriptUrl;`
 		]);
 	}
 }

diff --git a/lib/runtime/CreateScriptBlobRuntimeModule.js b/lib/runtime/CreateScriptBlobRuntimeModule.js
@@ -0,0 +1,40 @@
+/*
+	MIT License http://www.opensource.org/licenses/mit-license.php
+*/
+
+"use strict";
+
+const RuntimeGlobals = require("../RuntimeGlobals");
+const Template = require("../Template");
+const HelperRuntimeModule = require("./HelperRuntimeModule");
+
+class CreateScriptBlobRuntimeModule extends HelperRuntimeModule {
+	constructor() {
+		super("create script blob");
+	}
+
+	/**
+	 * @returns {string} runtime code
+	 */
+	generate() {
+		const { compilation } = this;
+		const { runtimeTemplate } = compilation;
+		const fn = RuntimeGlobals.createScriptBlob;
+
+		return Template.asString([
+			`${fn} = ${runtimeTemplate.basicFunction("code", [
+				"try {",
+				Template.indent(
+					`return URL.createObjectURL(new Blob([code], { type: "application/javascript" }));`
+				),
+				`} catch (e) {`,
+				Template.indent(
+					`return new URL("data:application/javascript," + encodeURIComponent(code));`
+				),
+				"}"
+			])}`
+		]);
+	}
+}
+
+module.exports = CreateScriptBlobRuntimeModule;