feat(migrate): commonChunksPlugin to SplitChunksPlugin

ISSUES CLOSED: #393

packages/migrate/commonsChunkPlugin/__snapshots__/commonsChunkPlugin.test.js.snap

@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`commonsChunkPlugin transforms correctly using "commonsChunkPlugin-0" data 1`] = `
+"module.export = {
+    optimizations: {
+        splitChunks: {
+            cacheGroup: {
+                common: {
+                    name: 'common',
+                    chunks: 'initial'
+                },
+
+                vendor: {
+                    name: 'vendor',
+                    test: '/node_modules/',
+                    chunks: 'initial'
+                },
+
+                minChunks: 2
+            }
+        }
+    }
+}
+"
+`;
+
+exports[`commonsChunkPlugin transforms correctly using "commonsChunkPlugin-1" data 1`] = `
+"module.export = {
+    optimizations: {
+        splitChunks: {
+            cacheGroup: {
+                common: {
+                    name: 'common',
+                    chunks: 'initial'
+                },
+
+                vendor: {
+                    name: 'vendor',
+                    test: '/node_modules/',
+                    chunks: 'initial'
+                }
+            }
+        }
+    }
+}
+"
+`;
+
+exports[`commonsChunkPlugin transforms correctly using "commonsChunkPlugin-2" data 1`] = `
+"module.export = {
+    optimizations: {
+        splitChunks: {
+            cacheGroup: {
+                vendor: {
+                    name: 'vendor',
+                    test: '/node_modules/',
+                    chunks: 'initial'
+                }
+            }
+        }
+    }
+}
+"
+`;
+
+exports[`commonsChunkPlugin transforms correctly using "commonsChunkPlugin-3" data 1`] = `
+"module.export = {
+    optimizations: {
+        splitChunks: {
+            cacheGroup: {
+                commons: {
+                    name: 'commons',
+                    chunks: 'initial'
+                }
+            }
+        }
+    }
+}
+"
+`;
+
+exports[`commonsChunkPlugin transforms correctly using "commonsChunkPlugin-4" data 1`] = `
+"module.export = {
+    optimizations: {
+        splitChunks: {
+            cacheGroup: {
+                main: {
+                    name: 'main'
+                },
+
+                chunks: 'async',
+                minSize: 0,
+                minChunks: 2
+            }
+        }
+    }
+}
+"
+`;

packages/migrate/commonsChunkPlugin/__testfixtures__/.editorconfig

@@ -0,0 +1,3 @@
+[*]
+indent_style = space
+indent_size = 4

packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-0.input.js

@@ -0,0 +1,8 @@
+module.export = {
+    plugins: [
+        new webpack.CommonsChunkPlugin({
+            names: ["common", "vendor"],
+			minChunks: 2
+        })
+    ]
+}

packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-1.input.js

@@ -0,0 +1,7 @@
+module.export = {
+    plugins: [
+        new webpack.CommonsChunkPlugin({
+            names: ["common", "vendor"]
+        })
+    ]
+}

packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-2.input.js

@@ -0,0 +1,7 @@
+module.export = {
+    plugins: [
+        new webpack.CommonsChunkPlugin({
+            names: ["vendor"]
+        })
+    ]
+}

packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-3.input.js

@@ -0,0 +1,8 @@
+module.export = {
+    plugins: [
+        new webpack.CommonsChunkPlugin({
+			filename: "commons.js",
+			name: "commons"
+		})
+    ]
+}

packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-4.input.js

@@ -0,0 +1,10 @@
+module.export = {
+    plugins: [
+        new webpack.CommonsChunkPlugin({
+			name: "main",
+            async: true,
+            minSize: 0,
+            minChunks: 2
+		})
+    ]
+}

packages/migrate/commonsChunkPlugin/commonsChunkPlugin.test.js

@@ -0,0 +1,9 @@
+"use strict";
+
+const defineTest = require("@webpack-cli/utils/defineTest").default;
+
+defineTest(__dirname, "commonsChunkPlugin", "commonsChunkPlugin-0");
+defineTest(__dirname, "commonsChunkPlugin", "commonsChunkPlugin-1");
+defineTest(__dirname, "commonsChunkPlugin", "commonsChunkPlugin-2");
+defineTest(__dirname, "commonsChunkPlugin", "commonsChunkPlugin-3");
+defineTest(__dirname, "commonsChunkPlugin", "commonsChunkPlugin-4");

packages/migrate/commonsChunkPlugin/commonsChunkPlugin.ts

@@ -0,0 +1,147 @@
+import {
+	addOrUpdateConfigObject,
+	createIdentifierOrLiteral,
+	createLiteral,
+	createProperty,
+	findAndRemovePluginByName,
+	findPluginsByName,
+} from "@webpack-cli/utils/ast-utils";
+
+import { IJSCodeshift, INode } from "../types/NodePath";
+
+/**
+ *
+ * Transform for CommonsChunkPlugin. If found, removes the
+ * plugin and sets optimizations.namedModules to true
+ *
+ * @param {Object} j - jscodeshift top-level import
+ * @param {Node} ast - jscodeshift ast to transform
+ * @returns {Node} ast - jscodeshift ast
+ */
+export default function(j: IJSCodeshift, ast: INode): INode {
+
+	let pluginProps: INode[];
+	const cacheGroupsArray: INode[] = [];
+
+	// find old options
+	const CommonsChunkPlugin = findPluginsByName(j, ast, ["webpack.CommonsChunkPlugin"]);
+
+	if (!CommonsChunkPlugin.size()) { return ast; }
+
+	CommonsChunkPlugin
+		.forEach((path: INode): void => {
+			pluginProps = path.value.arguments[0].properties; // any node
+		});
+
+	// create chunk cache group option
+	function createChunkCache(chunkName) {
+		const commonProperties = [
+			createProperty(
+				j,
+				"name",
+				chunkName.value,
+			),
+		];
+		switch (chunkName.value) {
+			case "vendor":
+				return j.property(
+					"init",
+					createIdentifierOrLiteral(j, chunkName.value),
+					j.objectExpression([
+						...commonProperties,
+						createProperty(
+							j,
+							"test",
+							"/node_modules/",
+						),
+						createProperty(
+							j,
+							"chunks",
+							"initial",
+						),
+					]),
+				);
+			case "common":
+			case "commons":
+				return j.property(
+					"init",
+					createIdentifierOrLiteral(j, chunkName.value),
+					j.objectExpression([
+						...commonProperties,
+						createProperty(
+							j,
+							"chunks",
+							"initial",
+						),
+					]),
+				);
+			default:
+				return j.property(
+					"init",
+					createIdentifierOrLiteral(j, chunkName.value),
+					j.objectExpression([
+						...commonProperties,
+					]),
+				);
+		}
+	}
+
+	// iterate old props and map new props
+	pluginProps.forEach((p: INode) => {
+		switch (p.key.name) {
+			case "names":
+				p.value.elements.forEach((chunkName) => {
+					cacheGroupsArray.push(
+						createChunkCache(chunkName),
+					);
+				});
+				break;
+			case "name":
+				cacheGroupsArray.push(
+					createChunkCache(p.value),
+				);
+				break;
+			case "async":
+				cacheGroupsArray.push(
+					createProperty(
+						j,
+						"chunks",
+						"async",
+					),
+				);
+				break;
+			case "minSize":
+			case "minChunks":
+				cacheGroupsArray.push(
+					createProperty(
+						j,
+						p.key.name,
+						p.value.value,
+					),
+				);
+				break;
+		}
+	});
+
+	// Remove old plugin
+	const root: INode = findAndRemovePluginByName(j, ast, "webpack.CommonsChunkPlugin");
+
+	// Add new optimizations splitChunks option
+	if (root) {
+		addOrUpdateConfigObject(
+			j,
+			root,
+			"optimizations",
+			"splitChunks",
+			j.objectExpression([
+				j.property(
+					"init",
+					createIdentifierOrLiteral(j, "cacheGroup"),
+					j.objectExpression(cacheGroupsArray),
+				),
+			]),
+		);
+	}
+
+	return ast;
+}

packages/migrate/migrate.ts

@@ -3,6 +3,7 @@ import pEachSeries = require("p-each-series");
 import pLazy = require("p-lazy");
 
 import bannerPluginTransform from "./bannerPlugin/bannerPlugin";
+import commonsChunkPluginTransform from "./commonsChunkPlugin/commonsChunkPlugin";
 import extractTextPluginTransform from "./extractTextPlugin/extractTextPlugin";
 import loaderOptionsPluginTransform from "./loaderOptionsPlugin/loaderOptionsPlugin";
 import loadersTransform from "./loaders/loaders";
@@ -15,6 +16,7 @@ import uglifyJsPluginTransform from "./uglifyJsPlugin/uglifyJsPlugin";
 
 interface ITransformsObject {
 	bannerPluginTransform: object;
+	commonsChunkPluginTransform?: object;
 	extractTextPluginTransform: object;
 	loaderOptionsPluginTransform: object;
 	loadersTransform: object;
@@ -36,6 +38,7 @@ const transformsObject: ITransformsObject = {
 	extractTextPluginTransform,
 	noEmitOnErrorsPluginTransform,
 	removeDeprecatedPluginsTransform,
+	commonsChunkPluginTransform,
 };
 /* tslint:enable object-literal-sort-keys */