diff --git a/src/entry-devserver.js b/src/entry-devserver.js index 5a33f08..b9c2551 100644 --- a/src/entry-devserver.js +++ b/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', }) ); diff --git a/src/index.js b/src/index.js index dbbaf39..4b3c6f8 100644 --- a/src/index.js +++ b/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) }) }