Fix HMR by sharing React between bundles via CommonChunk

shockey · shockey · commit 6f58078b0df9 · 2017-05-12T11:26:36.000-07:00
diff --git a/dev-helpers/index.html b/dev-helpers/index.html
@@ -44,9 +44,9 @@
 <body>
   <div id="swagger-editor"></div>
 
-  <!-- ./dist/* is just the dist folder.. assets on the root have HMR injected -->
-  <script src="./swagger-editor-bundle.js"> </script>
-  <script src="./swagger-editor-standalone-preset.js"> </script>
+  <script src="/commons.js"> </script>
+  <script src="/swagger-editor-bundle.js"> </script>
+  <script src="/swagger-editor-standalone-preset.js"> </script>
   <script>
   window.onload = function() {
     // Webpack outputs library variables with file-names-like-this
diff --git a/make-webpack-config.js b/make-webpack-config.js
@@ -161,9 +161,9 @@ module.exports = function(options) {
 
     devtool: specialOptions.sourcemaps ? 'cheap-module-source-map' : null,
 
-    plugins,
-
   }, options)
 
+  completeConfig.plugins = (plugins).concat(options.plugins || [])
+
   return completeConfig
 }
diff --git a/webpack-hot-dev-server.config.js b/webpack-hot-dev-server.config.js
@@ -1,4 +1,6 @@
 var path = require("path")
+var webpack = require('webpack')
+
 
 module.exports = require("./make-webpack-config.js")({
   _special: {
@@ -10,13 +12,19 @@ module.exports = require("./make-webpack-config.js")({
     }
   },
 
+  plugins: [
+    new webpack.optimize.CommonsChunkPlugin({ name: 'commons' }),
+  ],
+
   entry: {
     "swagger-editor-bundle": [
       './src/index.js'
     ],
     'swagger-editor-standalone-preset': [
       './src/standalone/index.js'
-    ]
+    ],
+    'commons': ['react']
+
   },
 
   output: {
@@ -32,6 +40,7 @@ module.exports = require("./make-webpack-config.js")({
   devServer: {
     port: 3200,
     path: path.join(__dirname, "dev-helpers"),
+    contentBase: path.join(__dirname, "dev-helpers"),
     publicPath: "/",
     noInfo: true,
     colors: true,

Original file line number	Diff line number	Diff line change
`@@ -161,9 +161,9 @@ module.exports = function(options) {`
`161`	`161`
`162`	`162`	`devtool: specialOptions.sourcemaps ? 'cheap-module-source-map' : null,`
`163`	`163`
`164`		`- plugins,`
`165`		`-`
`166`	`164`	`}, options)`
`167`	`165`
	`166`	`+ completeConfig.plugins = (plugins).concat(options.plugins \|\| [])`
	`167`	`+`
`168`	`168`	`return completeConfig`
`169`	`169`	`}`