fix: #1719

client-src/default/index.js

@@ -9,6 +9,32 @@ const { log, setLogLevel } = require('./utils/log');
 const sendMessage = require('./utils/sendMessage');
 const reloadApp = require('./utils/reloadApp');
 const createSocketUrl = require('./utils/createSocketUrl');
+const querystring = require('querystring');
+const url = require('url');
+
+let compilerName;
+(function parseCompilerName(resourceQuery) {
+  let urlParts;
+
+  if (typeof resourceQuery === 'string' && resourceQuery !== '') {
+    // If this bundle is inlined, use the resource query to get the correct url.
+    urlParts = url.parse(resourceQuery.substr(1));
+  } else {
+    // Else, get the url from the <script> this file was called with.
+    let scriptHost = getCurrentScriptSource();
+
+    // eslint-disable-next-line no-useless-escape
+    scriptHost = scriptHost.replace(/\/[^\/]+$/, '');
+    urlParts = url.parse(scriptHost || '/', false, true);
+  }
+  const { auth, path } = urlParts;
+
+  // eslint-disable-next-line no-undefined
+  if (path !== null && path !== undefined && path !== '/') {
+    const parsedQuery = querystring.parse(path);
+    compilerName = parsedQuery.compilerName;
+  }
+})(__resourceQuery)
 
 const status = {
   isUnloading: false,
@@ -43,7 +69,8 @@ const onSocketMessage = {
     options.liveReload = true;
     log.info('[WDS] Live Reloading enabled.');
   },
-  invalid() {
+  invalid(targetCompilerName) {
+    if (compilerName && compilerName !== targetCompilerName) return;
     log.info('[WDS] App updated. Recompiling...');
     // fixes #1042. overlay doesn't clear if errors are fixed but warnings remain.
     if (options.useWarningOverlay || options.useErrorOverlay) {
@@ -90,7 +117,8 @@ const onSocketMessage = {
     }
     sendMessage('Progress', data);
   },
-  ok() {
+  ok(targetCompilerName) {
+    if (!options.initial && compilerName && compilerName !== targetCompilerName) return;
     sendMessage('Ok');
     if (options.useWarningOverlay || options.useErrorOverlay) {
       overlay.clear();

client-src/live/index.js

@@ -60,6 +60,7 @@ $(() => {
       }
     },
     ok() {
+      console.log('OK!!');
       okness.text('');
       $errors.hide();
       reloadApp();

lib/Server.js

@@ -171,17 +171,17 @@ class Server {
 
   setupHooks() {
     // Listening for events
-    const invalidPlugin = () => {
-      this.sockWrite(this.sockets, 'invalid');
+    const invalidPlugin = (compilerName) => {
+      this.sockWrite(this.sockets, 'invalid', compilerName);
     };
 
     const addHooks = (compiler) => {
       const { compile, invalid, done } = compiler.hooks;
 
-      compile.tap('webpack-dev-server', invalidPlugin);
-      invalid.tap('webpack-dev-server', invalidPlugin);
+      compile.tap('webpack-dev-server', invalidPlugin.bind(this, compiler.options.name));
+      invalid.tap('webpack-dev-server', invalidPlugin.bind(this, compiler.options.name));
       done.tap('webpack-dev-server', (stats) => {
-        this._sendStats(this.sockets, this.getStats(stats));
+        this._sendStats(compiler, this.sockets, this.getStats(stats));
         this._stats = stats;
       });
     };
@@ -719,7 +719,7 @@ class Server {
         return;
       }
 
-      this._sendStats([connection], this.getStats(this._stats), true);
+      this._sendStats(null, [connection], this.getStats(this._stats), true);
     });
   }
 
@@ -938,7 +938,7 @@ class Server {
   }
 
   // send stats to a socket or multiple sockets
-  _sendStats(sockets, stats, force) {
+  _sendStats(compiler, sockets, stats, force) {
     if (
       !force &&
       stats &&
@@ -956,7 +956,7 @@ class Server {
     } else if (stats.warnings.length > 0) {
       this.sockWrite(sockets, 'warnings', stats.warnings);
     } else {
-      this.sockWrite(sockets, 'ok');
+      this.sockWrite(sockets, 'ok', compiler && compiler.options.name);
     }
   }
 

lib/utils/addEntries.js

@@ -3,7 +3,7 @@
 const webpack = require('webpack');
 const createDomain = require('./createDomain');
 
-function addEntries(config, options, server) {
+function addEntries(compiler, config, options, server) {
   if (options.inline !== false) {
     // we're stubbing the app in this method as it's static and doesn't require
     // a server to be supplied. createDomain requires an app with the
@@ -19,9 +19,10 @@ function addEntries(config, options, server) {
     const sockHost = options.sockHost ? `&sockHost=${options.sockHost}` : '';
     const sockPath = options.sockPath ? `&sockPath=${options.sockPath}` : '';
     const sockPort = options.sockPort ? `&sockPort=${options.sockPort}` : '';
+    const compilerName = `&compilerName=${compiler.options.name}`;
     const clientEntry = `${require.resolve(
       '../../client/'
-    )}?${domain}${sockHost}${sockPath}${sockPort}`;
+    )}?${domain}${sockHost}${sockPath}${sockPort}${compilerName}`;
     let hotEntry;
 
     if (options.hotOnly) {

lib/utils/updateCompiler.js

@@ -7,6 +7,13 @@
 const webpack = require('webpack');
 const addEntries = require('./addEntries');
 
+function guid() {
+  function s4() {
+    return ((1 + Math.random()) * 0x10000 | 0).toString(16).substring(1);
+  }
+  return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+}
+
 function updateCompiler(compiler, options) {
   if (options.inline !== false) {
     const findHMRPlugin = (config) => {
@@ -21,18 +28,21 @@ function updateCompiler(compiler, options) {
 
     const compilers = [];
     const compilersWithoutHMR = [];
-    let webpackConfig;
+    let webpackConfigs = [];
     if (compiler.compilers) {
-      webpackConfig = [];
       compiler.compilers.forEach((compiler) => {
-        webpackConfig.push(compiler.options);
+        webpackConfigs.push(compiler.options);
+        let name = compiler.options.name || guid();
+        compiler.options.name = name;
         compilers.push(compiler);
         if (!findHMRPlugin(compiler.options)) {
           compilersWithoutHMR.push(compiler);
         }
       });
     } else {
-      webpackConfig = compiler.options;
+      webpackConfigs = [compiler.options];
+      let name = compiler.options.name || guid();
+      compiler.options.name = name;
       compilers.push(compiler);
       if (!findHMRPlugin(compiler.options)) {
         compilersWithoutHMR.push(compiler);
@@ -44,7 +54,11 @@ function updateCompiler(compiler, options) {
     // the changes we are making to the compiler
     // important: this relies on the fact that addEntries now
     // prevents duplicate new entries.
-    addEntries(webpackConfig, options);
+    for (let i = 0; i < compilers.length; i ++) {
+      const compiler = compilers[i];
+      const config = webpackConfigs[i];
+      addEntries(compiler, config, options);
+    }
     compilers.forEach((compiler) => {
       const config = compiler.options;
       compiler.hooks.entryOption.call(config.context, config.entry);