chore(deps): upgrade to webpack@^5, add stream polyfill

package.json

@@ -142,12 +142,13 @@
     "scratch-l10n": "3.18.0",
     "selenium-webdriver": "4.1.0",
     "slick-carousel": "1.6.0",
+    "stream-browserify": "3.0.0",
     "style-loader": "0.12.3",
     "tap": "14.11.0",
     "url-loader": "3.0.0",
-    "webpack": "4.47.0",
+    "webpack": "5.89.0",
     "webpack-bundle-analyzer": "4.10.1",
-    "webpack-cli": "3.3.12",
+    "webpack-cli": "5.1.4",
     "webpack-dev-middleware": "5.3.1",
     "xhr": "2.2.0"
   },

webpack.config.js

@@ -98,7 +98,7 @@ class HtmlWebpackBackwardsCompatibilityPlugin {
 // Config
 module.exports = {
     entry: entry,
-    devtool: process.env.NODE_ENV === 'production' ? 'none' : 'eval',
+    devtool: process.env.NODE_ENV === 'production' ? false : 'eval',
     mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
     output: {
         path: path.resolve(__dirname, 'build'),
@@ -106,6 +106,10 @@ module.exports = {
         publicPath: '/'
     },
     resolve: {
+        fallback: {
+            // jszip uses Node's `stream` module, which is no longer polyfilled by default in Webpack 5
+            stream: require.resolve('stream-browserify')
+        },
         symlinks: false // Fix local development with `npm link` packages
     },
     module: {
@@ -172,15 +176,13 @@ module.exports = {
         ],
         noParse: /node_modules\/google-libphonenumber\/dist/
     },
-    node: {
-        fs: 'empty'
-    },
     optimization: {
         splitChunks: {
             cacheGroups: {
                 common: {
                     chunks: 'all',
                     name: 'common',
+                    minSize: 1024,
                     minChunks: pageRoutes.length // Extract only chunks common to all html pages
                 }
             }