feat: add webpack 5 support

.circleci/config.yml

@@ -45,7 +45,18 @@ jobs:
     parameters:
       node-version:
         default: '13.14'
-        type: string
+        enum:
+          - '10.21'
+          - '12.18'
+          - '13.14'
+          - '14.4'
+        type: enum
+      webpack-version:
+        default: latest
+        enum:
+          - latest
+          - next
+        type: enum
       setup:
         default: []
         type: steps
@@ -58,6 +69,16 @@ jobs:
           app-dir: ~/project
           pkg-manager: yarn
           with-cache: false
+      - run:
+          name: Install Webpack-related dependencies
+          command: |
+            if [[ << parameters.webpack-version >> == "next" ]]; then
+              WEBPACK_CLI_VERSION="beta"
+            else
+              WEBPACK_CLI_VERSION="latest"
+            fi
+
+            yarn add -D "webpack@<< parameters.webpack-version >>" "webpack-cli@$WEBPACK_CLI_VERSION"
       - run:
           name: Run Tests
           command: |
@@ -76,14 +97,34 @@ workflows:
     jobs:
       - lint-and-format
       - test:
-          name: test/node:10
+          name: test/node:10/webpack:4
+          node-version: '10.21'
+          webpack-version: latest
+      - test:
+          name: test/node:12/webpack:4
+          node-version: '12.18'
+          webpack-version: latest
+      - test:
+          name: test/node:13/webpack:4
+          node-version: '13.14'
+          webpack-version: latest
+      - test:
+          name: test/node:14/webpack:4
+          node-version: '14.4'
+          webpack-version: latest
+      - test:
+          name: test/node:10/webpack:5
           node-version: '10.21'
+          webpack-version: next
       - test:
-          name: test/node:12
+          name: test/node:12/webpack:5
           node-version: '12.18'
+          webpack-version: next
       - test:
-          name: test/node:13
+          name: test/node:13/webpack:5
           node-version: '13.14'
+          webpack-version: next
       - test:
-          name: test/node:14
+          name: test/node:14/webpack:5
           node-version: '14.4'
+          webpack-version: next

.eslintrc.json

@@ -32,6 +32,7 @@
       },
       "globals": {
         "__DEBUG__": true,
+        "WEBPACK_VERSION": true,
         "browser": true
       }
     },

client/ErrorOverlayEntry.js

@@ -55,15 +55,18 @@ function compileMessageHandler(message) {
   switch (message.type) {
     case 'ok':
     case 'still-ok':
-    case 'warnings':
+    case 'warnings': {
       // TODO: Implement handling for warnings
       handleCompileSuccess();
       break;
-    case 'errors':
+    }
+    case 'errors': {
       handleCompileErrors(message.data);
       break;
-    default:
-    // Do nothing.
+    }
+    default: {
+      // Do nothing.
+    }
   }
 }
 

lib/globals.js

@@ -0,0 +1,12 @@
+const { version } = require('webpack');
+
+// Parse Webpack's major version: x.y.z => x
+const webpackVersion = parseInt(version || '', 10);
+
+let webpackGlobals = {};
+if (webpackVersion === 5) {
+  webpackGlobals = require('webpack/lib/RuntimeGlobals');
+}
+
+module.exports.refreshGlobal = `${webpackGlobals.require || '__webpack_require__'}.$Refresh$`;
+module.exports.webpackVersion = webpackVersion;