feat: use webpack options sockPath, sockHost, and sockPort to get socket URL (#42)

Author: mefu

src/entry-devserver.js

@@ -1,3 +1,6 @@
+/* global __resourceQuery */
+
+import querystring from 'querystring';
 import url from 'url';
 import SockJS from 'sockjs-client';
 import formatWebpackMessages from 'react-dev-utils/formatWebpackMessages';
@@ -6,13 +9,17 @@ import {
   dismissBuildError,
 } from 'react-error-overlay'
 
+let sockOptions = {}
+if (typeof __resourceQuery === 'string' && __resourceQuery) {
+  sockOptions = querystring.parse(__resourceQuery.substr(1));
+}
+
 const connection = new SockJS(
   url.format({
     protocol: window.location.protocol,
-    hostname: window.location.hostname,
-    port: window.location.port,
-    // Hardcoded in WebpackDevServer
-    pathname: '/sockjs-node',
+    hostname: sockOptions.sockHost || window.location.hostname,
+    port: sockOptions.sockPort || window.location.port,
+    pathname: sockOptions.sockPath || '/sockjs-node',
   })
 );
 

src/index.js

@@ -10,9 +10,15 @@ class ErrorOverlayPlugin {
     if (compiler.options.mode !== 'development') return
 
     const devServerEnabled = !!compiler.options.devServer
+    const sockOptions = {}
+    if (devServerEnabled) {
+      sockOptions.sockHost = compiler.options.devServer.sockHost
+      sockOptions.sockPath = compiler.options.devServer.sockPath
+      sockOptions.sockPort = compiler.options.devServer.sockPort
+    }
 
     compiler.hooks.entryOption.tap(className, (context, entry) => {
-      adjustEntry(entry, devServerEnabled)
+      adjustEntry(entry, devServerEnabled, sockOptions)
     })
 
     compiler.hooks.afterResolvers.tap(className, ({ options }) => {
@@ -29,7 +35,7 @@ class ErrorOverlayPlugin {
   }
 }
 
-function adjustEntry(entry, enableDevServer) {
+function adjustEntry(entry, enableDevServer, sockOptions) {
   if (typeof entry === 'string') {
     throw new Error(
       `We currently do not inject our entry code into single-file anonymous entries.
@@ -39,8 +45,12 @@ Please use a multi-main (array) or object-form \`entry\` setting for now.`,
 
   if (Array.isArray(entry)) {
     if (enableDevServer) {
-      if (!entry.includes(chunkPathDevServer)) {
-        entry.unshift(chunkPathDevServer)
+      const sockHost = sockOptions.sockHost ? `&sockHost=${sockOptions.sockHost}` : ''
+      const sockPath = sockOptions.sockPath ? `&sockPath=${sockOptions.sockPath}` : ''
+      const sockPort = sockOptions.sockPort ? `&sockPort=${sockOptions.sockPort}` : ''
+      const chunkPathDevServerWithParams = `${chunkPathDevServer}?${sockHost}${sockPath}${sockPort}`
+      if (!entry.includes(chunkPathDevServerWithParams)) {
+        entry.unshift(chunkPathDevServerWithParams)
       }
     }
 
@@ -49,7 +59,7 @@ Please use a multi-main (array) or object-form \`entry\` setting for now.`,
     }
   } else {
     Object.keys(entry).forEach(entryName => {
-      entry[entryName] = adjustEntry(entry[entryName], enableDevServer)
+      entry[entryName] = adjustEntry(entry[entryName], enableDevServer, sockOptions)
     })
   }