Upgrade webpack to v5 (#5969)

* upgrade webpack and all webpack dependencies to newest version, remove unused dependencies * clean up webpack.config.js * enable persistent cache, tweak config, ignore lengthy warning * give uglify compression another try * save webpack cache in CI * remove terser-webpack-plugin since bug workaround is no longer needed and the plugin is included with webpack v5 * use optional chaining and check webpack rebuild time * readd terser plugin and disable compress, because the build time increase of 60% is too much for the marginal size gains of 5% * test caching time * Merge branch 'master' of github.com:scalableminds/webknossos into update-webpack-v5 * update changelog * Merge branch 'master' into update-webpack-v5 * Merge branch 'master' into update-webpack-v5
scalableminds · Jan 24, 2022 · deadfa9 · deadfa9
1 parent e1bce9d
commit deadfa9
Show file tree

Hide file tree

Showing 10 changed files with 1,317 additions and 1,976 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -52,10 +52,10 @@ jobs:
           name: Install frontend dependencies
           command: docker-compose run -e PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true base yarn install --frozen-lockfile
       - restore_cache:
-          name: Restore webpack-uglifyjs cache
+          name: Restore webpack cache
           keys:
-            - webpack-uglifyjs-cache-{{ checksum ".circleci/cache_version" }}-{{ .Branch }}
-            - webpack-uglifyjs-cache-{{ checksum ".circleci/cache_version" }}-master
+            - webpack-cache-{{ checksum ".circleci/cache_version" }}-{{ .Branch }}
+            - webpack-cache-{{ checksum ".circleci/cache_version" }}-master
       - run:
           name: Assert schema.sql and evolutions are equal
           command: |
@@ -110,10 +110,10 @@ jobs:
             - "~/.cache/yarn"
 
       - save_cache:
-          name: Save webpack-uglifyjs cache
-          key: webpack-uglifyjs-cache-{{ checksum ".circleci/cache_version" }}-{{ .Branch }}-{{ .Revision }}
+          name: Save webpack cache
+          key: webpack-cache-{{ checksum ".circleci/cache_version" }}-{{ .Branch }}-{{ .Revision }}
           paths:
-            - "node_modules/.cache/uglifyjs-webpack-plugin"
+            - "node_modules/.cache/webpack"
 
       - run:
           name: Build webknossos docker image

diff --git a/.flowconfig b/.flowconfig
@@ -18,7 +18,7 @@
 <PROJECT_ROOT>/node_modules/documentation/
 <PROJECT_ROOT>/node_modules/flow-coverage-report/
 <PROJECT_ROOT>/node_modules/jsonlint/
-<PROJECT_ROOT>/node_modules/hard-source-webpack-plugin/
+<PROJECT_ROOT>/node_modules/eslint-import-resolver-webpack
 <PROJECT_ROOT>/node_modules/.cache/nyc/
 <PROJECT_ROOT>/.nyc_output
 

diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
@@ -13,6 +13,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 ### Added
 
 ### Changed
+- Upgraded webpack build tool to v5 and all other webpack related dependencies to their latest version. Enabled persistent caching which speeds up server restarts during development as well as production builds. [#5969](https://github.com/scalableminds/webknossos/pull/5969)
 
 ### Fixed
 

diff --git a/app/views/main.scala.html b/app/views/main.scala.html
@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
     <meta name="commit-hash" content="@(webknossos.BuildInfo.commitHash)" />
     <title>@(conf.WebKnossos.tabTitle)</title>
     @if(conf.Features.isDemoInstance){
@@ -22,7 +22,7 @@
       rel="stylesheet"
       type="text/css"
       media="screen"
-      href="/assets/bundle/vendors~dark~light.css?nocache=@(webknossos.BuildInfo.commitHash)"
+      href="/assets/bundle/vendors~main.css?nocache=@(webknossos.BuildInfo.commitHash)"
     />
     <link
       rel="stylesheet"
@@ -33,23 +33,26 @@
     <script>
       let initialTheme = "@(selectedTheme)";
       if (initialTheme === "auto") {
-        initialTheme = 
-          window.matchMedia('(prefers-color-scheme: dark)').media !== "not all" && 
-          window.matchMedia('(prefers-color-scheme: dark)').matches ? 
-            "dark" : 
-            "light";
+        initialTheme =
+          window.matchMedia("(prefers-color-scheme: dark)").media !== "not all" &&
+          window.matchMedia("(prefers-color-scheme: dark)").matches
+            ? "dark"
+            : "light";
       }
-      document.documentElement.style.display = 'none';
+      document.documentElement.style.display = "none";
       document.head.insertAdjacentHTML(
-        'beforeend',
-        '<link ' +
+        "beforeend",
+        "<link " +
           'id="primary-stylesheet" ' +
           'rel="stylesheet" ' +
           'type="text/css" ' +
           'media="screen" ' +
-          'href="/assets/bundle/' + initialTheme + '.css?nocache=@(webknossos.BuildInfo.commitHash)" ' +
-          'onload="document.documentElement.style.display = \'\'" ' + 
-        '/>');
+          'href="/assets/bundle/' +
+          initialTheme +
+          '.css?nocache=@(webknossos.BuildInfo.commitHash)" ' +
+          "onload=\"document.documentElement.style.display = ''\" " +
+          "/>",
+      );
     </script>
     <script
       data-airbrake-project-id="@(conf.Airbrake.projectID)"

diff --git a/frontend/javascripts/libs/error_handling.js b/frontend/javascripts/libs/error_handling.js
@@ -2,7 +2,7 @@
  * error_handling.js
  * @flow
  */
-import AirbrakeClient from "airbrake-js";
+import { Notifier } from "@airbrake/browser";
 import _ from "lodash";
 
 import { getActionLog } from "oxalis/model/helpers/action_logger_middleware";
@@ -61,7 +61,7 @@ export function handleGenericError(error: { ...Error, messages?: mixed }) {
 class ErrorHandling {
   throwAssertions: boolean;
   commitHash: ?string;
-  airbrake: typeof AirbrakeClient;
+  airbrake: typeof Notifier;
   numberOfErrors: number = 0;
 
   initialize(options: ErrorHandlingOptions) {
@@ -86,9 +86,10 @@ class ErrorHandling {
     const projectKey = scriptTag.dataset.airbrakeProjectKey;
     const envName = scriptTag.dataset.airbrakeEnvironmentName;
 
-    this.airbrake = new AirbrakeClient({
+    this.airbrake = new Notifier({
       projectId,
       projectKey,
+      remoteConfig: false,
     });
 
     this.airbrake.addFilter(notice => {

diff --git a/frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segments_view.js b/frontend/javascripts/oxalis/view/right-border-tabs/segments_tab/segments_view.js
@@ -99,10 +99,10 @@ const mapStateToProps = (state: OxalisState): StateProps => {
   const activeVolumeTracing = getActiveSegmentationTracing(state);
   const mappingInfo = getMappingInfo(
     state.temporaryConfiguration.activeMappingByLayer,
-    visibleSegmentationLayer != null ? visibleSegmentationLayer.name : null,
+    visibleSegmentationLayer?.name,
   );
   return {
-    activeCellId: activeVolumeTracing != null ? activeVolumeTracing.activeCellId : null,
+    activeCellId: activeVolumeTracing?.activeCellId,
     isosurfaces:
       visibleSegmentationLayer != null
         ? state.localSegmentationData[visibleSegmentationLayer.name].isosurfaces

diff --git a/frontend/javascripts/test/puppeteer/dataset_rendering.screenshot.js b/frontend/javascripts/test/puppeteer/dataset_rendering.screenshot.js
@@ -2,7 +2,6 @@
 import type { DatasetConfiguration } from "oxalis/store";
 import anyTest, { type TestInterface } from "ava";
 import fetch, { Headers, Request, Response, FetchError } from "node-fetch";
-// eslint-disable-next-line import/no-extraneous-dependencies
 import path from "path";
 import puppeteer, { type Browser } from "puppeteer";
 

diff --git a/package.json b/package.json
@@ -23,20 +23,21 @@
     "abort-controller": "^3.0.0",
     "ava": "^3.13.0",
     "babel-eslint": "^9.0.0",
-    "babel-loader": "^8.0.0",
+    "babel-loader": "^8.2.3",
     "babel-plugin-import": "^1.9.1",
     "babel-plugin-istanbul": "^5.1.0",
     "commander": "^2.17.1",
+    "copy-webpack-plugin": "^10.2.0",
     "coveralls": "^3.0.2",
-    "css-loader": "^2.1.0",
+    "css-loader": "^6.5.1",
     "documentation": "^13.2.5",
     "domexception": "^2.0.1",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.9.1",
     "eslint": "^5.7.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-config-prettier": "^3.1.0",
-    "eslint-import-resolver-webpack": "^0.10.1",
+    "eslint-import-resolver-webpack": "^0.13.2",
     "eslint-plugin-eslint-comments": "^3.1.1",
     "eslint-plugin-flow-header": "^0.2.0",
     "eslint-plugin-flowtype": "^3.0.0",
@@ -45,20 +46,16 @@
     "eslint-plugin-react": "^7.12.4",
     "eslint-plugin-react-hooks": "^1.0.1",
     "espree": "^3.5.4",
-    "file-loader": "^1.1.5",
     "flow-bin": "^0.133.0",
     "flow-coverage-report": "^0.8.0",
-    "git-revision-webpack-plugin": "^3.0.3",
     "glob": "^7.1.3",
-    "hard-source-webpack-plugin": "git+https://github.com/talkable/hard-source-webpack-plugin.git#e774ef34ac7de7badf83f8560cca13861e76f23c",
-    "html-webpack-plugin": "^3.2.0",
     "husky": "^0.14.3",
     "isomorphic-fetch": "^2.2.0",
     "jsdoc": "^3.5.5",
     "jsdom": "^11.5.1",
     "json-loader": "^0.5.7",
     "less": "^4.0.0",
-    "less-loader": "^4.1.0",
+    "less-loader": "^10.2.0",
     "lint-staged": "^7.3.0",
     "merge-img": "^2.1.2",
     "mock-require": "^1.2.1",
@@ -78,20 +75,17 @@
     "rimraf": "^2.6.2",
     "shelljs": "^0.8.5",
     "sinon": "^12.0.1",
-    "style-loader": "^0.20.2",
-    "terser-webpack-plugin": "^1.1.0",
     "tmp": "0.0.33",
-    "url-loader": "^1.0.1",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.2.1"
+    "webpack": "^5.66.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.7.3"
   },
   "optionalDependencies": {
     "gl": "stackgl/headless-gl#4.5.0"
   },
   "scripts": {
     "start": "node tools/proxy/proxy.js",
-    "build": "node --max-old-space-size=4096 node_modules/.bin/webpack --env.production",
+    "build": "node --max-old-space-size=4096 node_modules/.bin/webpack --env production",
     "build-dev": "node_modules/.bin/webpack",
     "build-watch": "node_modules/.bin/webpack -w",
     "test": "tools/test.sh test --timeout=30s",
@@ -132,6 +126,7 @@
     ]
   },
   "dependencies": {
+    "@airbrake/browser": "^2.1.7",
     "@ant-design/compatible": "^1.0.8",
     "@ant-design/icons": "^4.6.2",
     "@fortawesome/fontawesome-free": "^5.14.0",
@@ -140,15 +135,12 @@
     "@tensorflow/tfjs": "^1.0.0",
     "@use-it/interval": "^1.0.0",
     "Enumjs": "https://github.com/ryan953/Enumjs#master",
-    "airbrake-js": "^1.4.0",
     "antd": "^4.15.0",
-    "autodll-webpack-plugin": "^0.4.2",
     "backbone-events-standalone": "^0.2.7",
     "base64-js": "^1.2.1",
     "beautiful-react-hooks": "^0.30.5",
     "classnames": "^2.2.5",
     "comlink": "^4.3.0",
-    "copy-webpack-plugin": "^4.6.0",
     "cross-fetch": "^3.0.1",
     "data.maybe": "^1.2.2",
     "deep-for-each": "^2.0.3",
@@ -168,7 +160,7 @@
     "lodash": "^4.17.21",
     "lz4js": "^0.2.0",
     "memoize-one": "^4.0.2",
-    "mini-css-extract-plugin": "^0.4.0",
+    "mini-css-extract-plugin": "^2.5.2",
     "mjs": "^1.0.0",
     "moment": "^2.21.0",
     "nanoevents": "^5.1.8",
@@ -192,10 +184,12 @@
     "redux-saga": "^1.0.0",
     "resumablejs": "^1.1.0",
     "saxophone": "^0.7.1",
+    "terser-webpack-plugin": "^5.3.0",
     "three": "^0.110.0",
     "tween.js": "^16.3.1",
+    "url": "^0.11.0",
     "url-join": "^4.0.0",
-    "worker-loader": "^2.0.0",
+    "worker-loader": "^3.0.8",
     "zip-js-webpack": "^1.0.0"
   },
   "resolutions": {