fix: issue with multiple webpackJsonp & runtime

Now every webpack config will have different webpackJsonp and there will only be a single runtime. See #13
swashata · Oct 20, 2018 · 846c2c0 · 846c2c0
1 parent ed5edb1
commit 846c2c0
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 11 deletions.
diff --git a/examples/plugin/src/reactapp/index.jsx b/examples/plugin/src/reactapp/index.jsx
@@ -3,6 +3,7 @@ import { render } from 'react-dom';
 import App from './App';
 
 document.addEventListener('DOMContentLoaded', () => {
+	console.log('Hello from React');
 	const entry = document.querySelector('#wpackio-reactapp');
 	render(<App />, entry);
 });
diff --git a/packages/scripts/__tests__/config/WebpackConfigHelper.spec.ts b/packages/scripts/__tests__/config/WebpackConfigHelper.spec.ts
@@ -414,7 +414,7 @@ describe('CreateWebPackConfig', () => {
 
 	// getOptimization()
 	describe('getOptimization', () => {
-		test('returns undefined when not in use', () => {
+		test('returns just runtimeChunk when not in use', () => {
 			const cwc = new WebpackConfigHelper(
 				projectConfig.files[0],
 				{
@@ -427,7 +427,7 @@ describe('CreateWebPackConfig', () => {
 				'/foo/bar',
 				false
 			);
-			expect(cwc.getOptimization()).toBeUndefined();
+			expect(cwc.getOptimization()).toEqual({ runtimeChunk: 'single' });
 		});
 
 		test('returns object when in use', () => {
@@ -444,6 +444,10 @@ describe('CreateWebPackConfig', () => {
 				false
 			);
 			expect(cwc.getOptimization()).not.toBeUndefined();
+			expect(
+				(cwc.getOptimization() as webpack.Options.Optimization)
+					.runtimeChunk
+			).toBe('single');
 			expect(cwc.getOptimization()).toMatchSnapshot();
 		});
 	});

diff --git a/packages/scripts/__tests__/config/__snapshots__/WebpackConfigHelper.spec.ts.snap b/packages/scripts/__tests__/config/__snapshots__/WebpackConfigHelper.spec.ts.snap
@@ -122,8 +122,25 @@ Object {
 
 exports[`CreateWebPackConfig getOptimization returns object when in use 1`] = `
 Object {
+  "runtimeChunk": "single",
   "splitChunks": Object {
+    "cacheGroups": Object {
+      "default": Object {
+        "minChunks": 2,
+        "priority": -20,
+        "reuseExistingChunk": true,
+      },
+      "vendors": Object {
+        "priority": -10,
+        "test": /\\[\\\\\\\\\\\\/\\]node_modules\\[\\\\\\\\\\\\/\\]/,
+      },
+    },
     "chunks": "all",
+    "maxAsyncRequests": 5,
+    "maxInitialRequests": 3,
+    "minChunks": 1,
+    "minSize": 30000,
+    "name": true,
   },
 }
 `;
@@ -186,6 +203,9 @@ A zero setup Webpack Bundler Script for WordPress",
 
 exports[`CreateWebPackConfig getPlugins has proper plugins for dev mode 1`] = `
 Array [
+  TimeFixPlugin {
+    "watchOffset": 11000,
+  },
   DefinePlugin {
     "definitions": Object {
       "__WPACKIO__": Object {
@@ -223,8 +243,5 @@ Array [
   WatchMissingNodeModulesPlugin {
     "nodeModulesPath": "/foo/bar/node_modules",
   },
-  TimeFixPlugin {
-    "watchOffset": 11000,
-  },
 ]
 `;
diff --git a/packages/scripts/src/config/WebpackConfigHelper.ts b/packages/scripts/src/config/WebpackConfigHelper.ts
@@ -201,6 +201,15 @@ export class WebpackConfigHelper {
 			// leave blank because we would handle with free variable
 			// __webpack_public_path__ in runtime.
 			publicPath: '',
+			// we need different jsonpFunction, it has to
+			// be unique for every webpack config, otherwise
+			// the later will override the previous
+			// having combination of appName and file.name
+			// kind of ensures that billions of devs, don't
+			// override each other!!!!
+			jsonpFunction: `wpackio${this.config.appName}${
+				this.file.name
+			}Jsonp`,
 		};
 		// Add the publicPath if it is in devMode
 		if (this.isDev) {
@@ -219,7 +228,7 @@ export class WebpackConfigHelper {
 	 */
 	public getPlugins(): webpack.Plugin[] {
 		// Add common plugins
-		const plugins: webpack.Plugin[] = [
+		let plugins: webpack.Plugin[] = [
 			// Define env
 			new webpack.DefinePlugin({
 				'process.env.NODE_ENV': JSON.stringify(this.env),
@@ -266,7 +275,7 @@ export class WebpackConfigHelper {
 			);
 			// Add timewatch plugin to avoid multiple successive build
 			// https://github.com/webpack/watchpack/issues/25
-			plugins.push(new TimeFixPlugin());
+			plugins = [new TimeFixPlugin(), ...plugins];
 		} else {
 			// Add Production specific plugins
 			const { bannerConfig } = this.config;
@@ -462,15 +471,35 @@ ${bannerConfig.copyrightText}${bannerConfig.credit ? creditNote : ''}`,
 	 */
 	public getOptimization(): webpack.Options.Optimization | undefined {
 		const { optimizeSplitChunks } = this.config;
+		const optimization: webpack.Options.Optimization = {
+			// We set runtimeChunk to be single
+			// because user can (and probably should)
+			// have multiple entry-point on the same page
+			runtimeChunk: 'single',
+		};
 		if (optimizeSplitChunks) {
-			return {
-				splitChunks: {
-					chunks: 'all',
+			optimization.splitChunks = {
+				chunks: 'all',
+				minSize: 30000,
+				minChunks: 1,
+				maxAsyncRequests: 5,
+				maxInitialRequests: 3,
+				name: true,
+				cacheGroups: {
+					vendors: {
+						test: /[\\/]node_modules[\\/]/,
+						priority: -10,
+					},
+					default: {
+						minChunks: 2,
+						priority: -20,
+						reuseExistingChunk: true,
+					},
 				},
 			};
 		}
 
-		return undefined;
+		return optimization;
 	}
 
 	/**