fix: support webpack@5 (#2359)

Author: evilebottnawi

azure-pipelines.yml

@@ -2,10 +2,13 @@ trigger:
   - master
   - next
 
+variables:
+  npm_config_cache: $(Pipeline.Workspace)/.npm
+
 jobs:
   - job: Lint
     pool:
-      vmImage: ubuntu-16.04
+      vmImage: ubuntu-latest
     steps:
       - task: NodeTool@0
         inputs:
@@ -20,10 +23,12 @@ jobs:
           node -v
           npm -v
         displayName: 'Print versions'
-      - task: Npm@1
+      - task: CacheBeta@1
         inputs:
-          command: custom
-          customCommand: ci
+          key: npm | $(Agent.OS) | package-lock.json
+          path: $(npm_config_cache)
+        displayName: 'Cache npm'
+      - script: npm ci
         displayName: 'Install dependencies'
       - script: npm run lint
         displayName: 'Run lint'
@@ -34,10 +39,13 @@ jobs:
 
   - job: Linux
     pool:
-      vmImage: ubuntu-16.04
+      vmImage: ubuntu-latest
     strategy:
-      maxParallel: 5
+      maxParallel: 6
       matrix:
+        node-13:
+          node_version: ^13.0.0
+          webpack_version: latest
         node-12:
           node_version: ^12.0.0
           webpack_version: latest
@@ -50,6 +58,9 @@ jobs:
         node-6:
           node_version: ^6.9.0
           webpack_version: latest
+        node-10-canary:
+          node_version: ^10.13.0
+          webpack_version: next
     steps:
       - task: NodeTool@0
         inputs:
@@ -64,10 +75,12 @@ jobs:
           node -v
           npm -v
         displayName: 'Print versions'
-      - task: Npm@1
+      - task: CacheBeta@1
         inputs:
-          command: custom
-          customCommand: ci
+          key: npm | $(Agent.OS) | package-lock.json
+          path: $(npm_config_cache)
+        displayName: 'Cache npm'
+      - script: npm ci
         displayName: 'Install dependencies'
       - script: npm i webpack@$(webpack_version)
         displayName: 'Install "webpack@$(webpack_version)"'
@@ -85,10 +98,13 @@ jobs:
 
   - job: macOS
     pool:
-      vmImage: macOS-10.14
+      vmImage: macOS-latest
     strategy:
-      maxParallel: 5
+      maxParallel: 6
       matrix:
+        node-13:
+          node_version: ^13.0.0
+          webpack_version: latest
         node-12:
           node_version: ^12.0.0
           webpack_version: latest
@@ -101,6 +117,9 @@ jobs:
         node-6:
           node_version: ^6.9.0
           webpack_version: latest
+        node-10-canary:
+          node_version: ^10.13.0
+          webpack_version: next
     steps:
       - task: NodeTool@0
         inputs:
@@ -115,10 +134,12 @@ jobs:
           node -v
           npm -v
         displayName: 'Print versions'
-      - task: Npm@1
+      - task: CacheBeta@1
         inputs:
-          command: custom
-          customCommand: ci
+          key: npm | $(Agent.OS) | package-lock.json
+          path: $(npm_config_cache)
+        displayName: 'Cache npm'
+      - script: npm ci
         displayName: 'Install dependencies'
       - script: npm i webpack@$(webpack_version)
         displayName: 'Install "webpack@$(webpack_version)"'
@@ -136,10 +157,13 @@ jobs:
 
   - job: Windows
     pool:
-      vmImage: windows-2019
+      vmImage: windows-latest
     strategy:
-      maxParallel: 5
+      maxParallel: 6
       matrix:
+        node-13:
+          node_version: ^13.0.0
+          webpack_version: latest
         node-12:
           node_version: ^12.0.0
           webpack_version: latest
@@ -152,6 +176,9 @@ jobs:
         node-6:
           node_version: ^6.9.0
           webpack_version: latest
+        node-10-canary:
+          node_version: ^10.13.0
+          webpack_version: next
     steps:
       - script: 'git config --global core.autocrlf input'
         displayName: 'Config git core.autocrlf'
@@ -169,10 +196,12 @@ jobs:
           node -v
           npm -v
         displayName: 'Print versions'
-      - task: Npm@1
+      - task: CacheBeta@1
         inputs:
-          command: custom
-          customCommand: ci
+          key: npm | $(Agent.OS) | package-lock.json
+          path: $(npm_config_cache)
+        displayName: 'Cache npm'
+      - script: npm ci
         displayName: 'Install dependencies'
       - script: npm i webpack@$(webpack_version)
         displayName: 'Install "webpack@$(webpack_version)"'

package.json

@@ -114,7 +114,7 @@
     "webpack-cli": "^3.3.10"
   },
   "peerDependencies": {
-    "webpack": "^4.0.0"
+    "webpack": "^4.0.0 || ^5.0.0"
   },
   "author": "Tobias Koppers @sokra",
   "bugs": "https://github.com/webpack/webpack-dev-server/issues",

test/cli/cli.test.js

@@ -176,8 +176,9 @@ describe('CLI', () => {
 
   it('should exit the process when SIGINT is detected, even before the compilation is done', (done) => {
     const cliPath = resolve(__dirname, '../../bin/webpack-dev-server.js');
-    const examplePath = resolve(__dirname, '../../examples/cli/public');
-    const cp = execa('node', [cliPath], { cwd: examplePath });
+    const simpleConfig = resolve(__dirname, '../fixtures/simple-config');
+    const cp = execa('node', [cliPath], { cwd: simpleConfig });
+
     let killed = false;
 
     cp.stdout.on('data', () => {
@@ -197,11 +198,13 @@ describe('CLI', () => {
 
   it('should use different random port when multiple instances are started on different processes', (done) => {
     const cliPath = resolve(__dirname, '../../bin/webpack-dev-server.js');
-    const examplePath = resolve(__dirname, '../../examples/cli/public');
+    const simpleConfig = resolve(__dirname, '../fixtures/simple-config');
 
-    const cp = execa('node', [cliPath, '--colors=false'], { cwd: examplePath });
+    const cp = execa('node', [cliPath, '--colors=false'], {
+      cwd: simpleConfig,
+    });
     const cp2 = execa('node', [cliPath, '--colors=false'], {
-      cwd: examplePath,
+      cwd: simpleConfig,
     });
 
     const runtime = {
@@ -220,22 +223,27 @@ describe('CLI', () => {
       const portMatch = /Project is running at http:\/\/localhost:(\d*)\//.exec(
         bits
       );
+
       if (portMatch) {
         runtime.cp.port = portMatch[1];
       }
+
       if (/Compiled successfully/.test(bits)) {
         expect(cp.pid !== 0).toBe(true);
         cp.kill('SIGINT');
       }
     });
+
     cp2.stdout.on('data', (data) => {
       const bits = data.toString();
       const portMatch = /Project is running at http:\/\/localhost:(\d*)\//.exec(
         bits
       );
+
       if (portMatch) {
         runtime.cp2.port = portMatch[1];
       }
+
       if (/Compiled successfully/.test(bits)) {
         expect(cp.pid !== 0).toBe(true);
         cp2.kill('SIGINT');
@@ -249,8 +257,10 @@ describe('CLI', () => {
         done();
       }
     });
+
     cp2.on('exit', () => {
       runtime.cp2.done = true;
+
       if (runtime.cp.done) {
         expect(runtime.cp.port !== runtime.cp2.port).toBe(true);
         done();

test/e2e/ClientOptions.test.js

@@ -324,7 +324,8 @@ describe('Client console.log', () => {
           });
         })
         .then(() => {
-          expect(res).toMatchSnapshot();
+          // Order doesn't matter, maybe we should improve that in future
+          expect(res.sort()).toMatchSnapshot();
           done();
         });
     });

test/e2e/Iframe.test.js

@@ -84,7 +84,8 @@ describe('Client iframe console.log', () => {
           });
         })
         .then(() => {
-          expect(res).toMatchSnapshot();
+          // Order doesn't matter, maybe we should improve that in future
+          expect(res.sort()).toMatchSnapshot();
           done();
         });
     });

test/e2e/__snapshots__/ClientOptions.test.js.snap

@@ -15,8 +15,8 @@ Array [
 
 exports[`Client console.log hot enabled 1`] = `
 Array [
-  "[HMR] Waiting for update signal from WDS...",
   "Hey.",
+  "[HMR] Waiting for update signal from WDS...",
   "[WDS] Hot Module Replacement enabled.",
   "[WDS] Live Reloading enabled.",
 ]

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

@@ -15,8 +15,8 @@ Array [
 
 exports[`Client iframe console.log hot enabled 1`] = `
 Array [
-  "[HMR] Waiting for update signal from WDS...",
   "Hey.",
+  "[HMR] Waiting for update signal from WDS...",
   "[WDS] Hot Module Replacement enabled.",
   "[WDS] Live Reloading enabled.",
 ]

test/server/Server.test.js

@@ -39,9 +39,9 @@ describe('Server', () => {
           return relative('.', p).split(sep);
         })
       ).toMatchSnapshot();
-      expect(
-        server.middleware.context.compiler.options.plugins
-      ).toMatchSnapshot();
+      expect(server.middleware.context.compiler.options.plugins).toEqual([
+        new webpack.HotModuleReplacementPlugin(),
+      ]);
 
       compiler.hooks.done.tap('webpack-dev-server', () => {
         server.close(done);
@@ -64,9 +64,9 @@ describe('Server', () => {
           return relative('.', p).split(sep);
         })
       ).toMatchSnapshot();
-      expect(
-        server.middleware.context.compiler.options.plugins
-      ).toMatchSnapshot();
+      expect(server.middleware.context.compiler.options.plugins).toEqual([
+        new webpack.HotModuleReplacementPlugin(),
+      ]);
 
       compiler.hooks.done.tap('webpack-dev-server', () => {
         server.close(done);
@@ -78,14 +78,6 @@ describe('Server', () => {
 
   // issue: https://github.com/webpack/webpack-dev-server/issues/1724
   describe('express.static.mine.types', () => {
-    beforeEach(() => {
-      jest.resetModules();
-    });
-
-    afterEach(() => {
-      jest.unmock('express');
-    });
-
     it("should success even if mine.types doesn't exist", (done) => {
       jest.mock('express', () => {
         const data = jest.requireActual('express');
@@ -118,31 +110,6 @@ describe('Server', () => {
     });
   });
 
-  describe('WEBPACK_DEV_SERVER environment variable', () => {
-    const OLD_ENV = process.env;
-
-    beforeEach(() => {
-      // this is important - it clears the cache
-      jest.resetModules();
-
-      process.env = { ...OLD_ENV };
-
-      delete process.env.WEBPACK_DEV_SERVER;
-    });
-
-    afterEach(() => {
-      process.env = OLD_ENV;
-    });
-
-    it('should be present', () => {
-      expect(process.env.WEBPACK_DEV_SERVER).toBeUndefined();
-
-      require('../../lib/Server');
-
-      expect(process.env.WEBPACK_DEV_SERVER).toBe(true);
-    });
-  });
-
   describe('Invalidate Callback', () => {
     describe('Testing callback functions on calling invalidate without callback', () => {
       it('should be `noop` (the default callback function)', (done) => {
@@ -178,4 +145,29 @@ describe('Server', () => {
       });
     });
   });
+
+  describe('WEBPACK_DEV_SERVER environment variable', () => {
+    const OLD_ENV = process.env;
+
+    beforeEach(() => {
+      // this is important - it clears the cache
+      jest.resetModules();
+
+      process.env = { ...OLD_ENV };
+
+      delete process.env.WEBPACK_DEV_SERVER;
+    });
+
+    afterEach(() => {
+      process.env = OLD_ENV;
+    });
+
+    it('should be present', () => {
+      expect(process.env.WEBPACK_DEV_SERVER).toBeUndefined();
+
+      require('../../lib/Server');
+
+      expect(process.env.WEBPACK_DEV_SERVER).toBe(true);
+    });
+  });
 });