Merge pull request #6712 from ManuelBauer/master

Allow configuration of split chunk filename delimiter

lib/WebpackOptionsDefaulter.js

@@ -210,6 +210,7 @@ class WebpackOptionsDefaulter extends OptionsDefaulter {
 		this.set("optimization.splitChunks.minSize", 30000);
 		this.set("optimization.splitChunks.minChunks", 1);
 		this.set("optimization.splitChunks.maxAsyncRequests", 5);
+		this.set("optimization.splitChunks.automaticNameDelimiter", "~");
 		this.set("optimization.splitChunks.maxInitialRequests", 3);
 		this.set("optimization.splitChunks.name", true);
 		this.set("optimization.splitChunks.cacheGroups", {});

lib/optimize/SplitChunksPlugin.js

@@ -90,45 +90,52 @@ module.exports = class SplitChunksPlugin {
 			minChunks: options.minChunks || 1,
 			maxAsyncRequests: options.maxAsyncRequests || 1,
 			maxInitialRequests: options.maxInitialRequests || 1,
-			getName: SplitChunksPlugin.normalizeName(options.name) || (() => {}),
+			getName:
+				SplitChunksPlugin.normalizeName({
+					name: options.name,
+					automaticNameDelimiter: options.automaticNameDelimiter
+				}) || (() => {}),
 			filename: options.filename || undefined,
-			getCacheGroups: SplitChunksPlugin.normalizeCacheGroups(
-				options.cacheGroups
-			)
+			getCacheGroups: SplitChunksPlugin.normalizeCacheGroups({
+				cacheGroups: options.cacheGroups,
+				automaticNameDelimiter: options.automaticNameDelimiter
+			})
 		};
 	}
 
-	static normalizeName(option) {
-		if (option === true) {
+	static normalizeName({ name, automaticNameDelimiter }) {
+		if (name === true) {
 			const fn = (module, chunks, cacheGroup) => {
 				const names = chunks.map(c => c.name);
 				if (!names.every(Boolean)) return;
 				names.sort();
 				let name =
-					(cacheGroup && cacheGroup !== "default" ? cacheGroup + "~" : "") +
-					names.join("~");
+					(cacheGroup && cacheGroup !== "default"
+						? cacheGroup + automaticNameDelimiter
+						: "") + names.join(automaticNameDelimiter);
 				// Filenames and paths can't be too long otherwise an
 				// ENAMETOOLONG error is raised. If the generated name if too
 				// long, it is truncated and a hash is appended. The limit has
 				// been set to 100 to prevent `[name].[chunkhash].[ext]` from
 				// generating a 256+ character string.
 				if (name.length > 100) {
-					name = name.slice(0, 100) + "~" + hashFilename(name);
+					name =
+						name.slice(0, 100) + automaticNameDelimiter + hashFilename(name);
 				}
 				return name;
 			};
 			return fn;
 		}
-		if (typeof option === "string") {
+		if (typeof name === "string") {
 			const fn = () => {
-				return option;
+				return name;
 			};
 			return fn;
 		}
-		if (typeof option === "function") return option;
+		if (typeof name === "function") return name;
 	}
 
-	static normalizeCacheGroups(cacheGroups) {
+	static normalizeCacheGroups({ cacheGroups, automaticNameDelimiter }) {
 		if (typeof cacheGroups === "function") {
 			return cacheGroups;
 		}
@@ -163,7 +170,10 @@ module.exports = class SplitChunksPlugin {
 						results.push({
 							key: key,
 							priority: option.priority,
-							getName: SplitChunksPlugin.normalizeName(option.name),
+							getName: SplitChunksPlugin.normalizeName({
+								name: option.name,
+								automaticNameDelimiter
+							}),
 							chunks: option.chunks,
 							enforce: option.enforce,
 							minSize: option.minSize,

schemas/WebpackOptions.json

@@ -1382,6 +1382,11 @@
                   "type": "string",
                   "minLength": 1
                 },
+                "automaticNameDelimiter": {
+                  "description": "Sets the name delimiter for created chunks",
+                  "type": "string",
+                  "minLength": 1
+                },
                 "cacheGroups": {
                   "description": "Assign modules to a cache group (modules from different cache groups are tried to keep in separate chunks)",
                   "type": "object",

test/configCases/split-chunks/chunk-filename-delimiter-default/a.js

@@ -0,0 +1,3 @@
+const c = require("./commons");
+
+module.exports = "a" + c;

test/configCases/split-chunks/chunk-filename-delimiter-default/b.js

@@ -0,0 +1,3 @@
+const c = require("./commons");
+
+module.exports = "b" + c;

test/configCases/split-chunks/chunk-filename-delimiter-default/c.js

@@ -0,0 +1,3 @@
+const c = require("./commons");
+
+module.exports = "c" + c;

test/configCases/split-chunks/chunk-filename-delimiter-default/commons.js

@@ -0,0 +1,2 @@
+/* Large module to trigger chunk generation */
+module.exports = "commons";

test/configCases/split-chunks/chunk-filename-delimiter-default/index.js

@@ -0,0 +1,16 @@
+require("should");
+
+it("should run", function() {
+	Promise.all(
+		[
+			import(/* webpackChunkName: "a" */ "./a"),
+			import(/* webpackChunkName: "b" */ "./b"),
+			import(/* webpackChunkName: "c" */ "./c")
+		]
+	);
+
+	const files = require("fs").readdirSync(__dirname);
+	const hasFile = files.indexOf('a~b~c.bundle.js') !== -1;
+
+	hasFile.should.be.eql(true);
+});

test/configCases/split-chunks/chunk-filename-delimiter-default/test.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+	findBundle: function(i, options) {
+		return ["main.js"];
+	}
+};

test/configCases/split-chunks/chunk-filename-delimiter-default/webpack.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+	entry: {
+		main: "./index"
+	},
+	node: {
+		__dirname: false,
+		__filename: false
+	},
+	output: {
+		filename: "[name].js",
+		chunkFilename: "[name].bundle.js",
+		jsonpFunction: "_load_chunk"
+	},
+	optimization: {
+		splitChunks: {
+			minSize: 1
+		}
+	}
+};

test/configCases/split-chunks/chunk-filename-delimiter/a.js

@@ -0,0 +1,3 @@
+const c = require("./commons");
+
+module.exports = "a" + c;

test/configCases/split-chunks/chunk-filename-delimiter/b.js

@@ -0,0 +1,3 @@
+const c = require("./commons");
+
+module.exports = "b" + c;

test/configCases/split-chunks/chunk-filename-delimiter/c.js

@@ -0,0 +1,3 @@
+const c = require("./commons");
+
+module.exports = "c" + c;

test/configCases/split-chunks/chunk-filename-delimiter/commons.js

@@ -0,0 +1,2 @@
+
+module.exports = "commons";

test/configCases/split-chunks/chunk-filename-delimiter/index.js

@@ -0,0 +1,16 @@
+require("should");
+
+it("should run", function() {
+	Promise.all(
+		[
+			import(/* webpackChunkName: "a" */ "./a"),
+			import(/* webpackChunkName: "b" */ "./b"),
+			import(/* webpackChunkName: "c" */ "./c")
+		]
+	);
+
+	const files = require("fs").readdirSync(__dirname);
+	const hasFile = files.indexOf('a-b-c.bundle.js') !== -1;
+
+	hasFile.should.be.eql(true);
+});

test/configCases/split-chunks/chunk-filename-delimiter/test.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+	findBundle: function(i, options) {
+		return ["main.js"];
+	}
+};

test/configCases/split-chunks/chunk-filename-delimiter/webpack.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+	entry: {
+		main: "./index"
+	},
+	node: {
+		__dirname: false,
+		__filename: false
+	},
+	output: {
+		filename: "[name].js",
+		chunkFilename: "[name].bundle.js",
+		jsonpFunction: "_load_chunk"
+	},
+	optimization: {
+		splitChunks: {
+			automaticNameDelimiter: "-",
+			minSize: 1
+		}
+	}
+};