Update to webpack 5.

Author: mikecao

package.json

@@ -17,7 +17,7 @@
     "build": "npm-run-all init-app build-prod",
     "test": "jest --coverage",
     "dev-all": "npm-run-all --parallel dev-electron dev-view",
-    "dev-view": "dotenv webpack-dev-server --progress --colors --config webpack.config.view.js",
+    "dev-view": "dotenv webpack serve --progress --config webpack.config.view.js",
     "dev-electron": "webpack --progress --watch --config webpack.config.electron.js",
     "build-dev": "webpack --progress --config webpack.config.js",
     "build-prod": "cross-env NODE_ENV=production webpack --progress --config webpack.config.js",
@@ -106,6 +106,7 @@
     "immer": "^8.0.0",
     "lodash": "^4.17.20",
     "mime": "^2.4.7",
+    "path-browserify": "^1.0.1",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
@@ -119,14 +120,14 @@
     "zustand": "^3.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-proposal-export-default-from": "^7.12.1",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
-    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
-    "@babel/plugin-proposal-optional-chaining": "^7.12.7",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/preset-react": "^7.12.10",
+    "@babel/core": "^7.13.8",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-export-default-from": "^7.12.13",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
+    "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
+    "@babel/plugin-proposal-optional-chaining": "^7.13.8",
+    "@babel/preset-env": "^7.13.9",
+    "@babel/preset-react": "^7.12.13",
     "@hot-loader/react-dom": "^17.0.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
     "babel-eslint": "^10.1.0",
@@ -137,10 +138,10 @@
     "css-minimizer-webpack-plugin": "^1.2.0",
     "dotenv": "^8.2.0",
     "dotenv-cli": "^4.0.0",
-    "electron": "11.1.1",
-    "electron-builder": "^22.9.1",
+    "electron": "12.0.0",
+    "electron-builder": "^22.10.5",
     "electron-notarize": "^1.0.0",
-    "electron-updater": "^4.3.5",
+    "electron-updater": "^4.3.8",
     "eslint": "^7.16.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^7.1.0",
@@ -173,8 +174,8 @@
     "svg-sprite-loader": "5.2.1",
     "terser-webpack-plugin": "^3.1.0",
     "url-loader": "^4.1.1",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^3.3.12",
+    "webpack": "^5.24.3",
+    "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.11.0"
   }
 }

src/utils/file.js

@@ -1,4 +1,4 @@
-import path from 'path';
+import path from 'path-browserify';
 
 export function replaceExt(file, ext) {
   const base = path.basename(file, path.extname(file)) + ext;

src/video/AudioProcess.js

@@ -1,4 +1,4 @@
-import path from 'path';
+import path from 'path-browserify';
 
 import Process from 'core/Process';
 import { replaceExt } from 'utils/file';

src/video/VideoRenderer.js

@@ -1,4 +1,4 @@
-import path from 'path';
+import path from 'path-browserify';
 import EventEmitter from 'core/EventEmitter';
 import RenderProcess from 'video/RenderProcess';
 import AudioProcess from 'video/AudioProcess';