fix(client): stricter reg exp to redirect sockjs client path (#2069)

* fix(client): stricter reg exp to redirect sockjs client path

* fix(client): check resource context for normal module replacement

* fix(client): remove dev server string from context path

* fix(client): remove console logs

* fix(client): fixed resource context match to use cwd

client-src/default/webpack.config.js

@@ -18,11 +18,16 @@ module.exports = {
     ],
   },
   plugins: [
-    new webpack.NormalModuleReplacementPlugin(/\/clients\//, (resource) => {
-      resource.request = resource.request.replace(
-        /\/clients\//,
-        '/../clients/'
-      );
-    }),
+    new webpack.NormalModuleReplacementPlugin(
+      /^\.\/clients\/SockJSClient$/,
+      (resource) => {
+        if (resource.context.startsWith(process.cwd())) {
+          resource.request = resource.request.replace(
+            /^\.\/clients\/SockJSClient$/,
+            '../clients/SockJSClient'
+          );
+        }
+      }
+    ),
   ],
 };

client-src/live/webpack.config.js

@@ -34,11 +34,16 @@ module.exports = {
         to: path.resolve(__dirname, '../../client/live.html'),
       },
     ]),
-    new webpack.NormalModuleReplacementPlugin(/\/clients\//, (resource) => {
-      resource.request = resource.request.replace(
-        /\/clients\//,
-        '/../clients/'
-      );
-    }),
+    new webpack.NormalModuleReplacementPlugin(
+      /^\.\/clients\/SockJSClient$/,
+      (resource) => {
+        if (resource.context.startsWith(process.cwd())) {
+          resource.request = resource.request.replace(
+            /^\.\/clients\/SockJSClient$/,
+            '../clients/SockJSClient'
+          );
+        }
+      }
+    ),
   ],
 };

test/e2e/Iframe.test.js

@@ -0,0 +1,83 @@
+'use strict';
+
+const testServer = require('../helpers/test-server');
+const config = require('../fixtures/client-config/webpack.config');
+const runBrowser = require('../helpers/run-browser');
+const port = require('../ports-map').Iframe;
+
+// iframe mode should be tested while still supported, because
+// its sources differ from those of inline mode, which can cause unexpected
+// breaking changes: https://github.com/webpack/webpack-dev-server/issues/2006
+describe('Client iframe console.log', () => {
+  const baseOptions = {
+    port,
+    host: '0.0.0.0',
+  };
+  const cases = [
+    {
+      title: 'hot disabled',
+      options: {
+        hot: false,
+      },
+    },
+    {
+      title: 'hot enabled',
+      options: {
+        hot: true,
+      },
+    },
+    {
+      title: 'liveReload disabled',
+      options: {
+        liveReload: false,
+      },
+    },
+    {
+      title: 'liveReload enabled',
+      options: {
+        liveReload: true,
+      },
+    },
+    {
+      title: 'clientLogLevel is silent',
+      options: {
+        clientLogLevel: 'silent',
+      },
+    },
+  ];
+
+  for (const { title, options } of cases) {
+    it(title, () => {
+      const res = [];
+      const testOptions = Object.assign({}, baseOptions, options);
+
+      // TODO: use async/await when Node.js v6 support is dropped
+      return Promise.resolve()
+        .then(() => {
+          return new Promise((resolve) => {
+            testServer.startAwaitingCompilation(config, testOptions, resolve);
+          });
+        })
+        .then(runBrowser)
+        .then(({ page, browser }) => {
+          return new Promise((resolve) => {
+            page.goto(`http://localhost:${port}/webpack-dev-server/main`);
+            page.on('console', ({ _text }) => {
+              res.push(_text);
+            });
+            setTimeout(() => {
+              browser.close().then(() => {
+                expect(res).toMatchSnapshot();
+                resolve();
+              });
+            }, 3000);
+          });
+        })
+        .then(() => {
+          return new Promise((resolve) => {
+            testServer.close(resolve);
+          });
+        });
+    });
+  }
+});

test/e2e/__snapshots__/Iframe.test.js.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Client iframe console.log clientLogLevel is silent 1`] = `
+Array [
+  "Hey.",
+]
+`;
+
+exports[`Client iframe console.log hot disabled 1`] = `
+Array [
+  "Hey.",
+  "[WDS] Live Reloading enabled.",
+]
+`;
+
+exports[`Client iframe console.log hot enabled 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+  "[WDS] Hot Module Replacement enabled.",
+  "[WDS] Live Reloading enabled.",
+]
+`;
+
+exports[`Client iframe console.log liveReload disabled 1`] = `
+Array [
+  "Hey.",
+]
+`;
+
+exports[`Client iframe console.log liveReload enabled 1`] = `
+Array [
+  "Hey.",
+]
+`;

test/ports-map.js

@@ -43,6 +43,7 @@ const portsList = {
   Progress: 1,
   'progress-option': 1,
   'profile-option': 1,
+  Iframe: 1,
 };
 
 let startPort = 8079;