Upgrade to Webpack 5 (#83)

Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/83
Co-authored-by: Zoë Bijl <code@moiety.me>
Co-committed-by: Zoë Bijl <code@moiety.me>

config/webpack/development.js

@@ -17,7 +17,7 @@ if (process.env.VAGRANT) {
 module.exports = merge(sharedConfig, {
   mode: 'development',
   cache: true,
-  devtool: 'cheap-module-eval-source-map',
+  devtool: 'eval-cheap-module-source-map',
 
   stats: {
     errorDetails: true,
@@ -28,35 +28,37 @@ module.exports = merge(sharedConfig, {
   },
 
   devServer: {
-    clientLogLevel: 'none',
     compress: settings.dev_server.compress,
-    quiet: settings.dev_server.quiet,
-    disableHostCheck: settings.dev_server.disable_host_check,
     host: settings.dev_server.host,
     port: settings.dev_server.port,
     https: settings.dev_server.https,
     hot: settings.dev_server.hmr,
-    contentBase: settings.public_root_path,
-    inline: settings.dev_server.inline,
-    useLocalIp: settings.dev_server.use_local_ip,
-    public: settings.dev_server.public,
-    publicPath: output.publicPath,
     historyApiFallback: {
       disableDotRule: true,
     },
     headers: settings.dev_server.headers,
+    client: {
+      logging: 'none',
       overlay: settings.dev_server.overlay,
+    },
+    static: {
+      directory: settings.public_root_path,
+      serveIndex: true,
+      watch: Object.assign(
+        {},
+        settings.dev_server.watch_options,
+        watchOptions,
+      ),
+    },
+    devMiddleware: {
+      publicPath: output.publicPath,
       stats: {
         entrypoints: false,
         errorDetails: false,
         modules: false,
         moduleTrace: false,
       },
-    watchOptions: Object.assign(
-      {},
-      settings.dev_server.watch_options,
-      watchOptions,
-    ),
-    writeToDisk: filePath => /ocr/.test(filePath),
+      writeToDisk: filePath => /ocr/.test(filePath)
+    }
   },
 });

config/webpack/production.js

@@ -23,9 +23,7 @@ module.exports = merge(sharedConfig, {
     minimize: true,
     minimizer: [
       new TerserPlugin({
-        cache: true,
         parallel: true,
-        sourceMap: true,
       }),
     ],
   },

config/webpack/shared.js

@@ -72,7 +72,7 @@ module.exports = {
     splitChunks: {
       cacheGroups: {
         default: false,
-        vendors: false,
+        vendorsVendors: false,
         common: {
           name: 'common',
           chunks (chunk) {
@@ -84,7 +84,8 @@ module.exports = {
         },
       },
     },
-    occurrenceOrder: true,
+    chunkIds: 'total-size',
+    moduleIds: 'size'
   },
 
   module: {
@@ -127,10 +128,4 @@ module.exports = {
   resolveLoader: {
     modules: ['node_modules'],
   },
-
-  node: {
-    // Called by http-link-header in an API we never use, increases
-    // bundle size unnecessarily
-    Buffer: false,
-  },
 };

config/webpacker.yml

@@ -59,17 +59,18 @@ development:
   # Reference: https://webpack.js.org/configuration/dev-server/
   dev_server:
     https: false
-    host: 0.0.0.0
     port: 3035
-    public: localhost:3035
+    webSocketURL:
+      hostname: '0.0.0.0'
+      pathname: '/ws'
+      port: 3035
     hmr: false
     # Inline should be set to true if using HMR
     inline: true
+    client:
       overlay: true
-    compress: true
-    disable_host_check: true
-    use_local_ip: false
-    quiet: false
+    open: true
+    allowedHosts: 'all'
     headers:
       'Access-Control-Allow-Origin': '*'
     watch_options:

package.json

@@ -5,7 +5,7 @@
     "node": ">=16"
   },
   "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --config config/webpack/development.js",
+    "dev": "cross-env NODE_ENV=development webpack server --config config/webpack/development.js",
     "build:development": "cross-env NODE_ENV=development webpack --config config/webpack/development.js",
     "build:production": "cross-env NODE_ENV=production webpack --config config/webpack/production.js",
     "build": "cross-env NODE_ENV=production webpack --config config/webpack/production.js",
@@ -135,16 +135,16 @@
     "stacktrace-js": "^2.0.2",
     "stringz": "^2.1.0",
     "substring-trie": "^1.0.2",
-    "terser-webpack-plugin": "^4.2.3",
+    "terser-webpack-plugin": "^5.0.0",
     "tesseract.js": "^2.1.5",
     "tiny-queue": "^0.2.1",
     "twitter-text": "3.1.0",
     "uuid": "^9.0.0",
-    "webpack": "^4.47.0",
-    "webpack-assets-manifest": "^4.0.6",
-    "webpack-bundle-analyzer": "^4.8.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-merge": "^5.9.0",
+    "webpack": "^5.102.1",
+    "webpack-assets-manifest": "^5.1.4",
+    "webpack-bundle-analyzer": "^4.10.2",
+    "webpack-cli": "^4.10.0",
+    "webpack-merge": "^6.0.1",
     "wicg-inert": "^3.1.2",
     "workbox-expiration": "^7.0.0",
     "workbox-precaching": "^7.0.0",
@@ -188,7 +188,7 @@
     "@types/redux-immutable": "^4.0.3",
     "@types/requestidlecallback": "^0.3.5",
     "@types/uuid": "^9.0.0",
-    "@types/webpack": "^4.41.33",
+    "@types/webpack": "^5.28.5",
     "@types/yargs": "^17.0.24",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
@@ -213,7 +213,7 @@
     "stylelint": "^15.10.1",
     "stylelint-config-standard-scss": "^11.0.0",
     "typescript": "^5.0.4",
-    "webpack-dev-server": "^3.11.3",
+    "webpack-dev-server": "^4.15.2",
     "yargs": "^17.7.2"
   },
   "resolutions": {