From 846c2c084bcab07aef0298400bca45b0e772b938 Mon Sep 17 00:00:00 2001 From: Swashata Ghosh Date: Sat, 20 Oct 2018 15:56:49 +0530 Subject: [PATCH] fix: issue with multiple webpackJsonp & runtime Now every webpack config will have different webpackJsonp and there will only be a single runtime. See #13 --- examples/plugin/src/reactapp/index.jsx | 1 + .../config/WebpackConfigHelper.spec.ts | 8 +++- .../WebpackConfigHelper.spec.ts.snap | 23 +++++++++-- .../scripts/src/config/WebpackConfigHelper.ts | 41 ++++++++++++++++--- 4 files changed, 62 insertions(+), 11 deletions(-) diff --git a/examples/plugin/src/reactapp/index.jsx b/examples/plugin/src/reactapp/index.jsx index a074e2ab9..f0bfa3d28 100644 --- 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(, entry); }); diff --git a/packages/scripts/__tests__/config/WebpackConfigHelper.spec.ts b/packages/scripts/__tests__/config/WebpackConfigHelper.spec.ts index b30e015cc..b0b963a49 100644 --- 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 index 84c32ead1..a653bb4aa 100644 --- 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 index 93f879716..cc5d1fb31 100644 --- 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; } /**