chore: support webpack@5 (#2828)

webpack · Nov 16, 2020 · 5e90f25 · 5e90f25
1 parent 9f1d02b
commit 5e90f25
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 54 deletions.
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
@@ -58,7 +58,7 @@ jobs:
       matrix:
         os: [ubuntu-latest, windows-latest, macos-latest]
         node-version: [10.x, 12.x, 14.x]
-        webpack-version: [latest, next]
+        webpack-version: [4, latest]
 
     runs-on: ${{ matrix.os }}
 

diff --git a/lib/Server.js b/lib/Server.js
@@ -146,10 +146,7 @@ class Server {
 
   setupDevMiddleware() {
     // middleware for serving webpack bundle
-    this.middleware = webpackDevMiddleware.default(
-      this.compiler,
-      this.options.dev
-    );
+    this.middleware = webpackDevMiddleware(this.compiler, this.options.dev);
   }
 
   setupCompressFeature() {

diff --git a/lib/utils/routes.js b/lib/utils/routes.js
@@ -44,6 +44,10 @@ function routes(server) {
     res.end('</body></html>');
 
     function writeDirectory(baseUrl, basePath) {
+      if (baseUrl === 'auto') {
+        baseUrl = '';
+      }
+
       const content = filesystem.readdirSync(basePath);
 
       res.write('<ul>');

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -55,15 +55,15 @@
     "p-retry": "^4.2.0",
     "portfinder": "^1.0.28",
     "schema-utils": "^2.7.0",
-    "selfsigned": "^1.10.7",
+    "selfsigned": "^1.10.8",
     "serve-index": "^1.9.1",
     "sockjs": "0.3.20",
     "sockjs-client": "1.4.0",
     "spdy": "^4.0.2",
     "strip-ansi": "^6.0.0",
     "url": "^0.11.0",
     "util": "^0.12.3",
-    "webpack-dev-middleware": "^4.0.0-rc.3",
+    "webpack-dev-middleware": "^4.0.2",
     "ws": "^7.3.1",
     "yargs": "^13.3.2"
   },

diff --git a/test/e2e/ClientOptions.test.js b/test/e2e/ClientOptions.test.js
@@ -125,20 +125,20 @@ describe('ws client proxy', () => {
       });
     });
 
+    // Using Chrome DevTools protocol directly for now:
+    // https://chromedevtools.github.io/devtools-protocol/tot/Network/#event-webSocketCreated
     // TODO: listen for websocket requestType via puppeteer when added
     // to puppeteer: https://github.com/puppeteer/puppeteer/issues/2974
     it('requests websocket through the proxy with proper port number', (done) => {
       runBrowser().then(({ page, browser }) => {
-        page.on('console', (msg) => {
-          const text = msg.text();
-          if (msg.type() === 'error' && text.includes('WebSocket connection')) {
-            page.waitFor(beforeBrowserCloseDelay).then(() => {
-              browser.close().then(() => {
-                expect(text).toContain(`ws://myhost:${port2}/ws`);
-                done();
-              });
+        const client = page._client;
+        client.on('Network.webSocketCreated', (evt) => {
+          page.waitFor(beforeBrowserCloseDelay).then(() => {
+            browser.close().then(() => {
+              expect(evt.url).toContain(`ws://myhost:${port2}/ws`);
+              done();
             });
-          }
+          });
         });
         page.goto(`http://localhost:${port2}/main`);
       });
@@ -318,20 +318,20 @@ describe('ws client host, port, and path', () => {
   afterAll(testServer.close);
 
   describe('browser client', () => {
+    // Using Chrome DevTools protocol directly for now:
+    // https://chromedevtools.github.io/devtools-protocol/tot/Network/#event-webSocketCreated
     // TODO: listen for websocket requestType via puppeteer when added
     // to puppeteer: https://github.com/puppeteer/puppeteer/issues/2974
     it('uses correct host, port, and path', (done) => {
       runBrowser().then(({ page, browser }) => {
-        page.on('console', (msg) => {
-          const text = msg.text();
-          if (msg.type() === 'error' && text.includes('WebSocket connection')) {
-            page.waitFor(beforeBrowserCloseDelay).then(() => {
-              browser.close().then(() => {
-                expect(text).toContain(`ws://myhost:${port3}/foo/test/bar`);
-                done();
-              });
+        const client = page._client;
+        client.on('Network.webSocketCreated', (evt) => {
+          page.waitFor(beforeBrowserCloseDelay).then(() => {
+            browser.close().then(() => {
+              expect(evt.url).toContain(`ws://myhost:${port3}/foo/test/bar`);
+              done();
             });
-          }
+          });
         });
         page.goto(`http://localhost:${port2}/main`);
       });
@@ -401,20 +401,21 @@ describe('Client console.log', () => {
       options = { ...mode, ...options };
       const testOptions = Object.assign({}, baseOptions, options);
       await it(title, async (done) => {
-        await testServer.startAwaitingCompilation(config, testOptions);
-        const res = [];
-        const { page, browser } = await runBrowser();
-        page.goto(`http://localhost:${port2}/main`);
-        page.on('console', ({ _text }) => {
-          res.push(_text);
+        testServer.startAwaitingCompilation(config, testOptions, async () => {
+          const res = [];
+          const { page, browser } = await runBrowser();
+          page.goto(`http://localhost:${port2}/main`);
+          page.on('console', ({ _text }) => {
+            res.push(_text);
+          });
+          // wait for load before closing the browser
+          await page.waitForNavigation({ waitUntil: 'load' });
+          await page.waitFor(beforeBrowserCloseDelay);
+          await browser.close();
+          // Order doesn't matter, maybe we should improve that in future
+          await expect(res.sort()).toMatchSnapshot();
+          await testServer.close(done);
         });
-        // wait for load before closing the browser
-        await page.waitForNavigation({ waitUntil: 'load' });
-        await page.waitFor(beforeBrowserCloseDelay);
-        await browser.close();
-        // Order doesn't matter, maybe we should improve that in future
-        await expect(res.sort()).toMatchSnapshot();
-        await testServer.close(done);
       });
     });
   });