cli(init): Add cachingGroup's defaults, fix entry

Author: EugeneHlushko

lib/generators/init-generator.js

@@ -114,8 +114,7 @@ module.exports = class InitGenerator extends Generator {
 			})
 			.then(prodConfirmAnswer => {
 				this.isProd = prodConfirmAnswer["prodConfirm"];
-				this.configuration.config.webpackOptions.mode =
-					this.isProd ? `"${"production"}"` : `"${"development"}"`;
+				this.configuration.config.webpackOptions.mode = this.isProd ? "'production'" : "'development'";
 			})
 			.then(() => {
 				return this.prompt([
@@ -376,39 +375,27 @@ module.exports = class InitGenerator extends Generator {
 					}
 				}
 				// add splitChunks options for transparency
-				const { entry } = this.configuration.config.webpackOptions;
 				this.configuration.config.topScope.push(tooltip.splitChunks());
 				this.configuration.config.webpackOptions.optimization = {
 					splitChunks: {
 						chunks: "'async'",
-						minChunks: 1,
 						minSize: 30000,
+						minChunks: 1,
+						// for production name is recommended to be off
+						name: !this.isProd,
+						cacheGroups: {
+							vendors: {
+								test: "/[\\\\/]node_modules[\\\\/]/",
+								priority: -10
+							},
+						},
+						default: {
+							minChunks: 2,
+							priority: -20,
+							reuseExistingChunk: true
+						}
 					}
 				};
-
-				// for production name is recommended to be off
-				if (this.isProd) {
-					this.configuration.config.webpackOptions.optimization.splitChunks.name = false;
-				}
-
-				if (entry && typeof entry === "object") {
-					// if user had provided multiple entry points, we make cacheGroup example
-					// per entry point
-					const entries = Object.keys(entry);
-					if (entries.length > 1) {
-						this.configuration.config.webpackOptions.optimization.splitChunks.cacheGroups = {};
-						entries.map(item => {
-							const newCacheGroup = {
-								chunks: "'all'",
-								// TODO: implement RegExp from entry for test value of caching group
-							};
-							if (!this.isProd) {
-								newCacheGroup.name = `'${item}'`;
-							}
-							this.configuration.config.webpackOptions.optimization.splitChunks.cacheGroups[item] = newCacheGroup;
-						});
-					}
-				}
 				done();
 			});
 	}

lib/generators/utils/entry.js

@@ -20,7 +20,7 @@ module.exports = (self, answer) => {
 			.prompt([
 				InputValidate(
 					"multipleEntries",
-					"Type the names you want for your modules (entry files), separated by comma [example: 'app,vendor']",
+					"Type the names you want for your modules (entry files), separated by comma [example: app,vendor]",
 					validate
 				)
 			])
@@ -40,7 +40,7 @@ module.exports = (self, answer) => {
 										!n[val].includes("path") &&
 										!n[val].includes("process")
 									) {
-										n[val] = `"${n[val]}.js"`;
+										n[val] = `"'${n[val]}.js'"`;
 									}
 									webpackEntryPoint[val] = n[val];
 								});
@@ -55,7 +55,7 @@ module.exports = (self, answer) => {
 					self.prompt([
 						InputValidate(
 							`${entryProp}`,
-							`What is the location of "${entryProp}"? [example: './src/${entryProp}']`,
+							`What is the location of "${entryProp}"? [example: ./src/${entryProp}]`,
 							validate
 						)
 					])
@@ -68,7 +68,7 @@ module.exports = (self, answer) => {
 							!propAns[val].includes("path") &&
 							!propAns[val].includes("process")
 						) {
-							propAns[val] = `"${propAns[val]}.js"`;
+							propAns[val] = `"'${propAns[val]}.js'"`;
 						}
 						webpackEntryPoint[val] = propAns[val];
 					});
@@ -80,7 +80,7 @@ module.exports = (self, answer) => {
 			.prompt([
 				InputValidate(
 					"singularEntry",
-					"Which module will be the first to enter the application? [default: './src/index']"
+					"Which module will be the first to enter the application? [default: ./src/index]"
 				)
 			])
 			.then(singularAnswer => `"${singularAnswer["singularEntry"]}"`);

lib/generators/utils/tooltip.js

@@ -27,7 +27,6 @@ module.exports = {
  * It is safe to remove "splitChunks" from the generated configuration
  * and was added as an educational example.
  *
- * Documentation page will be available here soon:
  * https://webpack.js.org/plugins/split-chunks-plugin/
  *
  */`;