Merge pull request #6651 from webpack/feature/split-chunks-filename

allow to configure filename for splitted chunks

lib/JavascriptModulesPlugin.js

@@ -100,7 +100,10 @@ class JavascriptModulesPlugin {
 						const moduleTemplates = options.moduleTemplates;
 						const dependencyTemplates = options.dependencyTemplates;
 
-						const filenameTemplate = outputOptions.chunkFilename;
+						let filenameTemplate;
+						if (chunk.filenameTemplate)
+							filenameTemplate = chunk.filenameTemplate;
+						else filenameTemplate = outputOptions.chunkFilename;
 
 						result.push({
 							render: () =>

lib/optimize/SplitChunksPlugin.js

@@ -91,6 +91,7 @@ module.exports = class SplitChunksPlugin {
 			maxAsyncRequests: options.maxAsyncRequests || 1,
 			maxInitialRequests: options.maxInitialRequests || 1,
 			getName: SplitChunksPlugin.normalizeName(options.name) || (() => {}),
+			filename: options.filename || undefined,
 			getCacheGroups: SplitChunksPlugin.normalizeCacheGroups(
 				options.cacheGroups
 			)
@@ -169,6 +170,7 @@ module.exports = class SplitChunksPlugin {
 							minChunks: option.minChunks,
 							maxAsyncRequests: option.maxAsyncRequests,
 							maxInitialRequests: option.maxInitialRequests,
+							filename: option.filename,
 							reuseExistingChunk: option.reuseExistingChunk
 						});
 					}
@@ -277,6 +279,10 @@ module.exports = class SplitChunksPlugin {
 									cacheGroupSource.getName !== undefined
 										? cacheGroupSource.getName
 										: this.options.getName,
+								filename:
+									cacheGroupSource.filename !== undefined
+										? cacheGroupSource.filename
+										: this.options.filename,
 								reuseExistingChunk: cacheGroupSource.reuseExistingChunk
 							};
 							// For all combination of chunk selection
@@ -439,6 +445,17 @@ module.exports = class SplitChunksPlugin {
 									newChunk.entryModule = undefined;
 								}
 							}
+							if (item.cacheGroup.filename) {
+								if (!newChunk.isOnlyInitial()) {
+									throw new Error(
+										"SplitChunksPlugin: You are trying to set a filename for a chunk which is (also) loaded on demand. " +
+											"The runtime can only handle loading of chunks which match the chunkFilename schema. " +
+											"Using a custom filename would fail at runtime. " +
+											`(cache group: ${item.cacheGroup.key})`
+									);
+								}
+								newChunk.filenameTemplate = item.cacheGroup.filename;
+							}
 							if (!isReused) {
 								// Add all modules to the new chunk
 								for (const module of item.modules) {

schemas/WebpackOptions.json

@@ -1377,6 +1377,11 @@
                     }
                   ]
                 },
+                "filename": {
+                  "description": "Sets the template for the filename for created chunks (Only works for initial 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",
@@ -1468,6 +1473,11 @@
                                 "type": "string"
                               }
                             ]
+                          },
+                          "filename": {
+                            "description": "Sets the template for the filename for created chunks (Only works for initial chunks)",
+                            "type": "string",
+                            "minLength": 1
                           }
                         }
                       }

test/configCases/filename-template/split-chunks-filename/index.js

@@ -0,0 +1,9 @@
+it("should create a vendor file", function() {
+	var fs = require("fs");
+	var path = require("path");
+	if(!fs.existsSync(path.join(__dirname, "vendor.js")))
+		throw new Error("vendor.js file was not created");
+});
+
+require.include("test");
+

test/configCases/filename-template/split-chunks-filename/webpack.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+	mode: "development",
+	node: {
+		__dirname: false,
+		__filename: false
+	},
+	optimization: {
+		splitChunks: {
+			cacheGroups: {
+				vendor: {
+					test: /node_modules/,
+					chunks: "initial",
+					filename: "vendor.js",
+					enforce: true
+				}
+			}
+		}
+	}
+};