Merge branch 'master' into DefinePlugin-type

.eslintrc.js

@@ -61,7 +61,7 @@ module.exports = {
 				browser: true
 			},
 			globals: {
-				Promise: false,
+				Promise: false
 			},
 			parserOptions: {
 				ecmaVersion: 5
@@ -71,6 +71,9 @@ module.exports = {
 			files: ["test/**/*.js"],
 			env: {
 				"jest/globals": true
+			},
+			globals: {
+				nsObj: false
 			}
 		}
 	]

README.md

@@ -92,16 +92,19 @@ within webpack itself use this plugin interface. This makes webpack very
 
 |Name|Status|Install Size|Description|
 |:--:|:----:|:----------:|:----------|
-|[extract-text-webpack-plugin][extract]|![extract-npm]|![extract-size]|Extracts Text (CSS) from your bundles into a separate file (app.bundle.css)|
+|[mini-css-extract-plugin][mini-css]|![mini-css-npm]|![mini-css-size]|Extracts CSS into separate files. It creates a CSS file per JS file which contains CSS.|
 |[compression-webpack-plugin][compression]|![compression-npm]|![compression-size]|Prepares compressed versions of assets to serve them with Content-Encoding|
 |[i18n-webpack-plugin][i18n]|![i18n-npm]|![i18n-size]|Adds i18n support to your bundles|
 |[html-webpack-plugin][html-plugin]|![html-plugin-npm]|![html-plugin-size]| Simplifies creation of HTML files (`index.html`) to serve your bundles|
-
+|[extract-text-webpack-plugin][extract]|![extract-npm]|![extract-size]|Extract text from a bundle, or bundles, into a separate file|
 
 [common-npm]: https://img.shields.io/npm/v/webpack.svg
 [extract]: https://github.com/webpack/extract-text-webpack-plugin
 [extract-npm]: https://img.shields.io/npm/v/extract-text-webpack-plugin.svg
 [extract-size]: https://packagephobia.now.sh/badge?p=extract-text-webpack-plugin
+[mini-css]: https://github.com/webpack-contrib/mini-css-extract-plugin
+[mini-css-npm]: https://img.shields.io/npm/v/mini-css-extract-plugin.svg
+[mini-css-size]: https://packagephobia.now.sh/badge?p=mini-css-extract-plugin
 [component]: https://github.com/webpack/component-webpack-plugin
 [component-npm]: https://img.shields.io/npm/v/component-webpack-plugin.svg
 [component-size]: https://packagephobia.now.sh/badge?p=component-webpack-plugin

_SETUP.md

@@ -27,7 +27,7 @@ yarn link webpack
 yarn test
 ```
 
-### To run only intergration tests use
+### To run only integration tests use
 
 ```bash
 yarn test:integration

declarations.d.ts

@@ -7,7 +7,6 @@ declare namespace NodeJS {
 	}
 }
 
-
 declare module "neo-async" {
 	export interface Dictionary<T> {
 		[key: string]: T;

examples/many-pages/README.md

@@ -1,6 +1,6 @@
 # Info
 
-This example illustrates webpack's algorthim for automatic deduplication using `optimization.splitChunks`.
+This example illustrates webpack's algorithm for automatic deduplication using `optimization.splitChunks`.
 
 This example application contains 7 pages, each of them importing 1-3 modules from the `node_modules` folder (vendor libs) and 0-3 modules from the `stuff` folder (application modules). In reallity an application is probably more complex, but the same mechanisms apply.
 
@@ -41,7 +41,7 @@ module.exports = {
 			chunks: "all",
 			maxInitialRequests: 20, // for HTTP2
 			maxAsyncRequests: 20, // for HTTP2
-			minSize: 40 // for example only: choosen to match 2 modules
+			minSize: 40 // for example only: chosen to match 2 modules
 			// omit minSize in real use case to use the default of 30kb
 		}
 	}

examples/many-pages/template.md

@@ -1,6 +1,6 @@
 # Info
 
-This example illustrates webpack's algorthim for automatic deduplication using `optimization.splitChunks`.
+This example illustrates webpack's algorithm for automatic deduplication using `optimization.splitChunks`.
 
 This example application contains 7 pages, each of them importing 1-3 modules from the `node_modules` folder (vendor libs) and 0-3 modules from the `stuff` folder (application modules). In reallity an application is probably more complex, but the same mechanisms apply.
 

examples/many-pages/webpack.config.js

@@ -14,7 +14,7 @@ module.exports = {
 			chunks: "all",
 			maxInitialRequests: 20, // for HTTP2
 			maxAsyncRequests: 20, // for HTTP2
-			minSize: 40 // for example only: choosen to match 2 modules
+			minSize: 40 // for example only: chosen to match 2 modules
 			// omit minSize in real use case to use the default of 30kb
 		}
 	}

hot/dev-server.js

@@ -40,10 +40,10 @@ if (module.hot) {
 						"warning",
 						"[HMR] Cannot apply update. Need to do a full reload!"
 					);
-					log("warning", "[HMR] " + err.stack || err.message);
+					log("warning", "[HMR] " + (err.stack || err.message));
 					window.location.reload();
 				} else {
-					log("warning", "[HMR] Update failed: " + err.stack || err.message);
+					log("warning", "[HMR] Update failed: " + (err.stack || err.message));
 				}
 			});
 	};

hot/only-dev-server.js

@@ -72,11 +72,11 @@ if (module.hot) {
 						"warning",
 						"[HMR] Cannot check for update. Need to do a full reload!"
 					);
-					log("warning", "[HMR] " + err.stack || err.message);
+					log("warning", "[HMR] " + (err.stack || err.message));
 				} else {
 					log(
 						"warning",
-						"[HMR] Update check failed: " + err.stack || err.message
+						"[HMR] Update check failed: " + (err.stack || err.message)
 					);
 				}
 			});

hot/poll.js

@@ -23,10 +23,13 @@ if (module.hot) {
 					var status = module.hot.status();
 					if (["abort", "fail"].indexOf(status) >= 0) {
 						log("warning", "[HMR] Cannot apply update.");
-						log("warning", "[HMR] " + err.stack || err.message);
+						log("warning", "[HMR] " + (err.stack || err.message));
 						log("warning", "[HMR] You need to restart the application!");
 					} else {
-						log("warning", "[HMR] Update failed: " + err.stack || err.message);
+						log(
+							"warning",
+							"[HMR] Update failed: " + (err.stack || err.message)
+						);
 					}
 				});
 		}

hot/signal.js

@@ -37,10 +37,10 @@ if (module.hot) {
 				var status = module.hot.status();
 				if (["abort", "fail"].indexOf(status) >= 0) {
 					log("warning", "[HMR] Cannot apply update.");
-					log("warning", "[HMR] " + err.stack || err.message);
+					log("warning", "[HMR] " + (err.stack || err.message));
 					log("warning", "[HMR] You need to restart the application!");
 				} else {
-					log("warning", "[HMR] Update failed: " + err.stack || err.message);
+					log("warning", "[HMR] Update failed: " + (err.stack || err.message));
 				}
 			});
 	};

lib/AutomaticPrefetchPlugin.js

@@ -8,7 +8,7 @@ const asyncLib = require("neo-async");
 const PrefetchDependency = require("./dependencies/PrefetchDependency");
 const NormalModule = require("./NormalModule");
 
-/** @typedef {import("./Compiler.js")} Compiler */
+/** @typedef {import("./Compiler")} Compiler */
 
 class AutomaticPrefetchPlugin {
 	/**

lib/Chunk.js

@@ -13,9 +13,9 @@ const ERR_CHUNK_ENTRY = "Chunk.entry was removed. Use hasRuntime()";
 const ERR_CHUNK_INITIAL =
 	"Chunk.initial was removed. Use canBeInitial/isOnlyInitial()";
 
-/** @typedef {import("./Module.js")} Module */
+/** @typedef {import("./Module")} Module */
 /** @typedef {import("./ChunkGroup")} ChunkGroup */
-/** @typedef {import("./ModuleReason.js")} ModuleReason */
+/** @typedef {import("./ModuleReason")} ModuleReason */
 /** @typedef {import("webpack-sources").Source} Source */
 /** @typedef {import("./util/createHash").Hash} Hash */
 
@@ -121,6 +121,8 @@ class Chunk {
 		this.entryModule = undefined;
 		/** @private @type {SortableSet<Module>} */
 		this._modules = new SortableSet(undefined, sortByIdentifier);
+		/** @type {string?} */
+		this.filenameTemplate = undefined;
 
 		/** @private */
 		this._groups = new SortableSet(undefined, sortChunkGroupById);
@@ -626,7 +628,7 @@ class Chunk {
 			list.sort((a, b) => {
 				const cmp = b.order - a.order;
 				if (cmp !== 0) return cmp;
-				// TOOD webpack 5 remove this check of compareTo
+				// TODO webpack 5 remove this check of compareTo
 				if (a.group.compareTo) {
 					return a.group.compareTo(b.group);
 				}

lib/ChunkGroup.js

@@ -442,7 +442,7 @@ class ChunkGroup {
 			list.sort((a, b) => {
 				const cmp = b.order - a.order;
 				if (cmp !== 0) return cmp;
-				// TOOD webpack 5 remove this check of compareTo
+				// TODO webpack 5 remove this check of compareTo
 				if (a.group.compareTo) {
 					return a.group.compareTo(b.group);
 				}

lib/CommentCompilationWarning.js

@@ -6,9 +6,9 @@
 
 const WebpackError = require("./WebpackError");
 
-/** @typedef {import("./Module.js")} Module */
+/** @typedef {import("./Module")} Module */
 
-/** @typedef {import("./Dependency.js").DependencyLocation} DependencyLocation */
+/** @typedef {import("./Dependency").DependencyLocation} DependencyLocation */
 
 class CommentCompilationWarning extends WebpackError {
 	/**

lib/CompatibilityPlugin.js

@@ -8,7 +8,7 @@ const ConstDependency = require("./dependencies/ConstDependency");
 
 const NullFactory = require("./NullFactory");
 
-/** @typedef {import("./Compiler.js")} Compiler */
+/** @typedef {import("./Compiler")} Compiler */
 
 class CompatibilityPlugin {
 	/**

lib/Compilation.js

@@ -26,7 +26,6 @@ const ChunkTemplate = require("./ChunkTemplate");
 const HotUpdateChunkTemplate = require("./HotUpdateChunkTemplate");
 const ModuleTemplate = require("./ModuleTemplate");
 const RuntimeTemplate = require("./RuntimeTemplate");
-const Dependency = require("./Dependency");
 const ChunkRenderError = require("./ChunkRenderError");
 const AsyncDependencyToInitialChunkError = require("./AsyncDependencyToInitialChunkError");
 const Stats = require("./Stats");
@@ -36,6 +35,7 @@ const Queue = require("./util/Queue");
 const SortableSet = require("./util/SortableSet");
 const GraphHelpers = require("./GraphHelpers");
 const ModuleDependency = require("./dependencies/ModuleDependency");
+const compareLocations = require("./compareLocations");
 
 /** @typedef {import("./Module")} Module */
 /** @typedef {import("./Compiler")} Compiler */
@@ -642,7 +642,7 @@ class Compilation extends Tapable {
 					war.dependencies = dependencies;
 					this.warnings.push(war);
 				}
-				module.dependencies.sort(Dependency.compare);
+				module.dependencies.sort((a, b) => compareLocations(a.loc, b.loc));
 				if (error) {
 					this.hooks.failedModule.call(module, error);
 					return callback(error);
@@ -1292,6 +1292,9 @@ class Compilation extends Tapable {
 	 * @returns {void}
 	 */
 	sortModules(modules) {
+		// TODO webpack 5: this should only be enabled when `moduleIds: "natural"`
+		// TODO move it into a plugin (NaturalModuleIdsPlugin) and use this in WebpackOptionsApply
+		// TODO remove this method
 		modules.sort(byIndexOrIdentifier);
 	}
 
@@ -1453,7 +1456,7 @@ class Compilation extends Tapable {
 	 * @returns {DependencyReference} a reference for the dependency
 	 */
 	getDependencyReference(module, dependency) {
-		// TODO remove dep.getReference existance check in webpack 5
+		// TODO remove dep.getReference existence check in webpack 5
 		if (typeof dependency.getReference !== "function") return null;
 		const ref = dependency.getReference();
 		if (!ref) return null;
@@ -2113,7 +2116,7 @@ class Compilation extends Tapable {
 
 		/**
 		 * Used to sort errors and warnings in compilation. this.warnings, and
-		 * this.errors contribute to the compilation hash and therefore shoudl be
+		 * this.errors contribute to the compilation hash and therefore should be
 		 * updated whenever other references (having a chunk id) are sorted. This preserves the hash
 		 * integrity
 		 *

lib/ContextModule.js

@@ -3,20 +3,37 @@
 	Author Tobias Koppers @sokra
 */
 "use strict";
-const path = require("path");
 const util = require("util");
 const { OriginalSource, RawSource } = require("webpack-sources");
 const Module = require("./Module");
 const AsyncDependenciesBlock = require("./AsyncDependenciesBlock");
 const Template = require("./Template");
+const contextify = require("./util/identifier").contextify;
 
 /** @typedef {import("./dependencies/ContextElementDependency")} ContextElementDependency */
 
+/**
+ * @callback ResolveDependenciesCallback
+ * @param {Error=} err
+ * @param {ContextElementDependency[]} dependencies
+ */
+
+/**
+ * @callback ResolveDependencies
+ * @param {TODO} fs
+ * @param {TODO} options
+ * @param {ResolveDependenciesCallback} callback
+ */
+
 class ContextModule extends Module {
 	// type ContextMode = "sync" | "eager" | "weak" | "async-weak" | "lazy" | "lazy-once"
 	// type ContextOptions = { resource: string, recursive: boolean, regExp: RegExp, addon?: string, mode?: ContextMode, chunkName?: string, include?: RegExp, exclude?: RegExp, groupOptions?: Object }
 	// resolveDependencies: (fs: FS, options: ContextOptions, (err: Error?, dependencies: Dependency[]) => void) => void
 	// options: ContextOptions
+	/**
+	 * @param {ResolveDependencies} resolveDependencies function to get dependencies in this context
+	 * @param {TODO} options options object
+	 */
 	constructor(resolveDependencies, options) {
 		let resource;
 		let resourceQuery;
@@ -63,18 +80,6 @@ class ContextModule extends Module {
 		return regexString.substring(1, regexString.length - 1);
 	}
 
-	contextify(context, request) {
-		return request
-			.split("!")
-			.map(subrequest => {
-				let rp = path.relative(context, subrequest);
-				if (path.sep === "\\") rp = rp.replace(/\\/g, "/");
-				if (rp.indexOf("../") !== 0) rp = "./" + rp;
-				return rp;
-			})
-			.join("!");
-	}
-
 	_createIdentifier() {
 		let identifier = this.context;
 		if (this.options.resourceQuery) {
@@ -155,15 +160,15 @@ class ContextModule extends Module {
 	}
 
 	libIdent(options) {
-		let identifier = this.contextify(options.context, this.context);
+		let identifier = contextify(options.context, this.context);
 		if (this.options.mode) {
 			identifier += ` ${this.options.mode}`;
 		}
 		if (this.options.recursive) {
 			identifier += " recursive";
 		}
 		if (this.options.addon) {
-			identifier += ` ${this.contextify(options.context, this.options.addon)}`;
+			identifier += ` ${contextify(options.context, this.options.addon)}`;
 		}
 		if (this.options.regExp) {
 			identifier += ` ${this.prettyRegExp(this.options.regExp + "")}`;
@@ -206,7 +211,9 @@ class ContextModule extends Module {
 
 			// enhance dependencies with meta info
 			for (const dep of dependencies) {
-				dep.loc = dep.userRequest;
+				dep.loc = {
+					name: dep.userRequest
+				};
 				dep.request = this.options.addon + dep.request;
 			}
 

lib/DelegatedModuleFactoryPlugin.js

@@ -15,7 +15,13 @@ class DelegatedModuleFactoryPlugin {
 	constructor(options) {
 		this.options = options;
 		options.type = options.type || "require";
-		options.extensions = options.extensions || ["", ".js"];
+		options.extensions = options.extensions || [
+			"",
+			".wasm",
+			".mjs",
+			".js",
+			".json"
+		];
 	}
 
 	apply(normalModuleFactory) {