Merge pull request #4553 from timse/named-chunks-plugin

sokra · web-flow · commit e7c13d75e433 · 2017-04-04T09:45:08.000+02:00
Named chunks plugin
diff --git a/lib/AsyncDependenciesBlock.js b/lib/AsyncDependenciesBlock.js
@@ -22,7 +22,7 @@ module.exports = class AsyncDependenciesBlock extends DependenciesBlock {
 	updateHash(hash) {
 		hash.update(this.chunkName || "");
 		hash.update(this.chunks && this.chunks.map((chunk) => {
-			return typeof chunk.id === "number" ? chunk.id : "";
+			return chunk.id !== null ? chunk.id : "";
 		}).join(",") || "");
 		super.updateHash(hash);
 	}
diff --git a/lib/HotModuleReplacement.runtime.js b/lib/HotModuleReplacement.runtime.js
@@ -175,7 +175,6 @@ module.exports = function() {
 				hotSetStatus("idle");
 				return null;
 			}
-
 			hotRequestedFilesMap = {};
 			hotWaitingFilesMap = {};
 			hotAvailableFilesMap = update.c;
diff --git a/lib/HotModuleReplacementPlugin.js b/lib/HotModuleReplacementPlugin.js
@@ -109,10 +109,8 @@ HotModuleReplacementPlugin.prototype.apply = function(compiler) {
 				c: {}
 			};
 			Object.keys(records.chunkHashs).forEach(function(chunkId) {
-				chunkId = +chunkId;
-				var currentChunk = this.chunks.filter(function(chunk) {
-					return chunk.id === chunkId;
-				})[0];
+				chunkId = isNaN(+chunkId) ? chunkId : +chunkId;
+				var currentChunk = this.chunks.find(chunk => chunk.id === chunkId);
 				if(currentChunk) {
 					var newModules = currentChunk.modules.filter(function(module) {
 						return module.hotUpdate;
@@ -171,7 +169,7 @@ HotModuleReplacementPlugin.prototype.apply = function(compiler) {
 				hotInitCode
 				.replace(/\$require\$/g, this.requireFn)
 				.replace(/\$hash\$/g, JSON.stringify(hash))
-				.replace(/\/\*foreachInstalledChunks\*\//g, chunk.chunks.length > 0 ? "for(var chunkId in installedChunks)" : "var chunkId = " + chunk.id + ";")
+				.replace(/\/\*foreachInstalledChunks\*\//g, chunk.chunks.length > 0 ? "for(var chunkId in installedChunks)" : "var chunkId = " + JSON.stringify(chunk.id) + ";")
 			]);
 		});
 
diff --git a/lib/JsonpMainTemplatePlugin.js b/lib/JsonpMainTemplatePlugin.js
@@ -18,7 +18,7 @@ JsonpMainTemplatePlugin.prototype.apply = function(mainTemplate) {
 				"var installedChunks = {",
 				this.indent(
 					chunk.ids.map(function(id) {
-						return id + ": 0";
+						return JSON.stringify(id) + ": 0";
 					}).join(",\n")
 				),
 				"};"
diff --git a/lib/NamedChunksPlugin.js b/lib/NamedChunksPlugin.js
@@ -0,0 +1,30 @@
+/*
+	MIT License http://www.opensource.org/licenses/mit-license.php
+	Author Tobias Koppers @sokra
+*/
+"use strict";
+
+class NamedChunksPlugin {
+
+	static defaultNameResolver(chunk) {
+		return chunk.name || null;
+	}
+
+	constructor(nameResolver) {
+		this.nameResolver = nameResolver || NamedChunksPlugin.defaultNameResolver;
+	}
+
+	apply(compiler) {
+		compiler.plugin("compilation", (compilation) => {
+			compilation.plugin("before-chunk-ids", (chunks) => {
+				chunks.forEach((chunk) => {
+					if(chunk.id === null) {
+						chunk.id = this.nameResolver(chunk);
+					}
+				});
+			});
+		});
+	}
+}
+
+module.exports = NamedChunksPlugin;
diff --git a/lib/dependencies/DepBlockHelpers.js b/lib/dependencies/DepBlockHelpers.js
@@ -16,19 +16,19 @@ DepBlockHelpers.getLoadDepBlockWrapper = function(depBlock, outputOptions, reque
 DepBlockHelpers.getDepBlockPromise = function(depBlock, outputOptions, requestShortener, name) {
 	if(depBlock.chunks) {
 		var chunks = depBlock.chunks.filter(function(chunk) {
-			return !chunk.hasRuntime() && typeof chunk.id === "number";
+			return !chunk.hasRuntime() && chunk.id !== null;
 		});
 		if(chunks.length === 1) {
 			var chunk = chunks[0];
-			return "__webpack_require__.e" + asComment(name) + "(" + chunk.id + "" +
+			return "__webpack_require__.e" + asComment(name) + "(" + JSON.stringify(chunk.id) + "" +
 				(outputOptions.pathinfo && depBlock.chunkName ? "/*! " + requestShortener.shorten(depBlock.chunkName) + " */" : "") +
 				asComment(depBlock.chunkReason) + ")";
 		} else if(chunks.length > 0) {
 			return "Promise.all" + asComment(name) + "(" +
 				(outputOptions.pathinfo && depBlock.chunkName ? "/*! " + requestShortener.shorten(depBlock.chunkName) + " */" : "") +
 				"[" +
 				chunks.map(function(chunk) {
-					return "__webpack_require__.e(" + chunk.id + ")";
+					return "__webpack_require__.e(" + JSON.stringify(chunk.id) + ")";
 				}).join(", ") +
 				"])";
 		}
diff --git a/lib/optimize/AggressiveSplittingPlugin.js b/lib/optimize/AggressiveSplittingPlugin.js
@@ -91,15 +91,19 @@ class AggressiveSplittingPlugin {
 								newChunk._fromAggressiveSplitting = true;
 								if(j < savedSplits.length)
 									newChunk._fromAggressiveSplittingIndex = j;
-								if(typeof splitData.id === "number") newChunk.id = splitData.id;
+								if(splitData.id !== null && splitData.id !== undefined) {
+									newChunk.id = splitData.id;
+								}
 								newChunk.origins = chunk.origins.map(copyWithReason);
 								chunk.origins = chunk.origins.map(copyWithReason);
 								return true;
 							} else {
 								if(j < savedSplits.length)
 									chunk._fromAggressiveSplittingIndex = j;
 								chunk.name = null;
-								if(typeof splitData.id === "number") chunk.id = splitData.id;
+								if(splitData.id !== null && splitData.id !== undefined) {
+									chunk.id = splitData.id;
+								}
 							}
 						}
 					}
diff --git a/lib/webpack.js b/lib/webpack.js
@@ -102,6 +102,7 @@ exportPlugins(exports, ".", [
 	"DllReferencePlugin",
 	"LoaderOptionsPlugin",
 	"NamedModulesPlugin",
+	"NamedChunksPlugin",
 	"HashedModuleIdsPlugin",
 	"ModuleFilenameHelpers"
 ]);
diff --git a/test/TestCases.test.js b/test/TestCases.test.js
@@ -1,6 +1,7 @@
+/* global describe, it*/
 "use strict";
 
-const should = require("should");
+require("should");
 const path = require("path");
 const fs = require("fs");
 const vm = require("vm");
@@ -92,7 +93,8 @@ describe("TestCases", () => {
 		plugins: [
 			new webpack.HotModuleReplacementPlugin(),
 			new webpack.optimize.UglifyJsPlugin(),
-			new webpack.NamedModulesPlugin()
+			new webpack.NamedModulesPlugin(),
+			new webpack.NamedChunksPlugin()
 		]
 	}].forEach((config) => {
 		describe(config.name, () => {
diff --git a/test/statsCases/named-chunks-plugin-async/entry.js b/test/statsCases/named-chunks-plugin-async/entry.js
@@ -0,0 +1,3 @@
+import("./modules/a");
+import("./modules/b");
+
diff --git a/test/statsCases/named-chunks-plugin-async/expected.txt b/test/statsCases/named-chunks-plugin-async/expected.txt
@@ -0,0 +1,12 @@
+Hash: ad8adb01e611de794006
+Time: Xms
+                     Asset       Size                   Chunks             Chunk Names
+chunk-containing-__a_js.js  266 bytes  chunk-containing-__a_js  [emitted]  
+chunk-containing-__b_js.js  123 bytes  chunk-containing-__b_js  [emitted]  
+                  entry.js    5.98 kB                    entry  [emitted]  entry
+chunk {chunk-containing-__a_js} chunk-containing-__a_js.js 37 bytes {entry} [rendered]
+    [2] (webpack)/test/statsCases/named-chunks-plugin-async/modules/a.js 37 bytes {chunk-containing-__a_js} [built]
+chunk {chunk-containing-__b_js} chunk-containing-__b_js.js 22 bytes {chunk-containing-__a_js} {entry} [rendered]
+    [0] (webpack)/test/statsCases/named-chunks-plugin-async/modules/b.js 22 bytes {chunk-containing-__b_js} [built]
+chunk {entry} entry.js (entry) 47 bytes [entry] [rendered]
+    [1] (webpack)/test/statsCases/named-chunks-plugin-async/entry.js 47 bytes {entry} [built]
diff --git a/test/statsCases/named-chunks-plugin-async/modules/a.js b/test/statsCases/named-chunks-plugin-async/modules/a.js
@@ -0,0 +1,2 @@
+import("./b");
+module.exports = "a";
diff --git a/test/statsCases/named-chunks-plugin-async/modules/b.js b/test/statsCases/named-chunks-plugin-async/modules/b.js
@@ -0,0 +1 @@
+module.exports = "b";
diff --git a/test/statsCases/named-chunks-plugin-async/webpack.config.js b/test/statsCases/named-chunks-plugin-async/webpack.config.js
@@ -0,0 +1,27 @@
+"use strict";
+
+const NamedChunksPlugin = require("../../../lib/NamedChunksPlugin");
+const RequestShortener = require("../../../lib/RequestShortener");
+
+module.exports = {
+	entry: {
+		"entry": "./entry",
+	},
+	plugins: [
+		new NamedChunksPlugin(function(chunk) {
+			if(chunk.name) {
+				return chunk.name;
+			}
+			const modulesToName = (mods) => mods.map((mod) => {
+				const rs = new RequestShortener(mod.context);
+				return rs.shorten(mod.request).replace(/[.\/\\]/g, "_");
+			}).join("-");
+
+			if(chunk.modules.length > 0) {
+				return `chunk-containing-${modulesToName(chunk.modules)}`;
+			}
+
+			return null;
+		}),
+	]
+};
diff --git a/test/statsCases/named-chunks-plugin/entry.js b/test/statsCases/named-chunks-plugin/entry.js
@@ -0,0 +1,3 @@
+require("./modules/a");
+require("./modules/b");
+require("./modules/c");
diff --git a/test/statsCases/named-chunks-plugin/expected.txt b/test/statsCases/named-chunks-plugin/expected.txt
@@ -0,0 +1,14 @@
+Hash: ac63e5be974bcdfea3a3
+Time: Xms
+      Asset       Size    Chunks             Chunk Names
+   entry.js  345 bytes     entry  [emitted]  entry
+manifest.js    5.78 kB  manifest  [emitted]  manifest
+  vendor.js  397 bytes    vendor  [emitted]  vendor
+chunk {entry} entry.js (entry) 94 bytes {vendor} [initial] [rendered]
+ [./entry.js] (webpack)/test/statsCases/named-chunks-plugin/entry.js 72 bytes {entry} [built]
+ [./modules/c.js] (webpack)/test/statsCases/named-chunks-plugin/modules/c.js 22 bytes {entry} [built]
+chunk {manifest} manifest.js (manifest) 0 bytes [entry] [rendered]
+chunk {vendor} vendor.js (vendor) 84 bytes {manifest} [initial] [rendered]
+ [./modules/a.js] (webpack)/test/statsCases/named-chunks-plugin/modules/a.js 22 bytes {vendor} [built]
+ [./modules/b.js] (webpack)/test/statsCases/named-chunks-plugin/modules/b.js 22 bytes {vendor} [built]
+    [0] multi ./modules/a ./modules/b 40 bytes {vendor} [built]
diff --git a/test/statsCases/named-chunks-plugin/modules/a.js b/test/statsCases/named-chunks-plugin/modules/a.js
@@ -0,0 +1 @@
+module.exports = "a";
diff --git a/test/statsCases/named-chunks-plugin/modules/b.js b/test/statsCases/named-chunks-plugin/modules/b.js
@@ -0,0 +1 @@
+module.exports = "b";
diff --git a/test/statsCases/named-chunks-plugin/modules/c.js b/test/statsCases/named-chunks-plugin/modules/c.js
@@ -0,0 +1 @@
+module.exports = "c";
diff --git a/test/statsCases/named-chunks-plugin/webpack.config.js b/test/statsCases/named-chunks-plugin/webpack.config.js
@@ -0,0 +1,18 @@
+var CommonsChunkPlugin = require("../../../lib/optimize/CommonsChunkPlugin");
+var NamedChunksPlugin = require("../../../lib/NamedChunksPlugin");
+var NamedModulesPlugin = require("../../../lib/NamedModulesPlugin");
+
+module.exports = {
+	entry: {
+		"entry": "./entry",
+		"vendor": ["./modules/a", "./modules/b"],
+	},
+	plugins: [
+		new CommonsChunkPlugin({
+			names: ["vendor", "manifest"],
+			minChunks: Infinity
+		}),
+		new NamedChunksPlugin(),
+		new NamedModulesPlugin(),
+	]
+};

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ module.exports = class AsyncDependenciesBlock extends DependenciesBlock {`
`22`	`22`	`updateHash(hash) {`
`23`	`23`	`hash.update(this.chunkName \|\| "");`
`24`	`24`	`hash.update(this.chunks && this.chunks.map((chunk) => {`
`25`		`- return typeof chunk.id === "number" ? chunk.id : "";`
	`25`	`+ return chunk.id !== null ? chunk.id : "";`
`26`	`26`	`}).join(",") \|\| "");`
`27`	`27`	`super.updateHash(hash);`
`28`	`28`	`}`
Original file line number	Diff line number	Diff line change
`@@ -175,7 +175,6 @@ module.exports = function() {`
`175`	`175`	`hotSetStatus("idle");`
`176`	`176`	`return null;`
`177`	`177`	`}`
`178`		`-`
`179`	`178`	`hotRequestedFilesMap = {};`
`180`	`179`	`hotWaitingFilesMap = {};`
`181`	`180`	`hotAvailableFilesMap = update.c;`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import("./modules/a");`
	`2`	`+import("./modules/b");`
	`3`	`+`