Upgrade webpack v5 and related modules

packages/cli/src/commands/dev.js

@@ -100,7 +100,7 @@ export const handler = async ({
       command: `cd "${path.join(
         BASE_DIR,
         'web'
-      )}" && yarn webpack-dev-server --config ../node_modules/@redwoodjs/core/config/webpack.development.js ${forward}`,
+      )}" && yarn webpack serve --config ../node_modules/@redwoodjs/core/config/webpack.development.js ${forward}`,
       prefixColor: 'blue',
       runWhen: () => fs.existsSync(WEB_DIR_SRC),
     },

packages/core/config/webpack.common.js

@@ -44,8 +44,8 @@ const getStyleLoaders = (isEnvProduction) => {
   const cssLoader = (withModules, importLoaders) => {
     // Obscured classnames in production, more expressive classnames in development.
     const localIdentName = isEnvProduction
-      ? '[hash:base64]'
-      : '[path][name]__[local]--[hash:base64:5]'
+      ? '[contenthash:base64]'
+      : '[path][name]__[local]--[contenthash:base64:5]'
 
     const loaderConfig = {
       loader: 'css-loader',
@@ -85,15 +85,15 @@ const getStyleLoaders = (isEnvProduction) => {
   return [
     {
       test: /\.module\.css$/,
-      loader: [
+      use: [
         styleOrExtractLoader,
         cssLoader(true, numImportLoadersForCSS),
         postCssLoader,
       ].filter(Boolean),
     },
     {
       test: /\.css$/,
-      loader: [
+      use: [
         styleOrExtractLoader,
         cssLoader(false, numImportLoadersForCSS),
         postCssLoader,
@@ -102,7 +102,7 @@ const getStyleLoaders = (isEnvProduction) => {
     },
     {
       test: /\.module\.scss$/,
-      loader: [
+      use: [
         styleOrExtractLoader,
         cssLoader(true, numImportLoadersForSCSS),
         postCssLoader,
@@ -111,7 +111,7 @@ const getStyleLoaders = (isEnvProduction) => {
     },
     {
       test: /\.scss$/,
-      loader: [
+      use: [
         styleOrExtractLoader,
         cssLoader(false, numImportLoadersForSCSS),
         postCssLoader,
@@ -240,11 +240,12 @@ module.exports = (webpackEnv) => {
                   loader: 'url-loader',
                   options: {
                     limit: '10000',
-                    name: 'static/media/[name].[hash:8].[ext]',
+                    name: 'static/media/[name].[contenthash:8].[ext]',
                   },
                 },
               ],
             },
+            // (1)
             {
               test: /\.(js|mjs|jsx)$/,
               exclude: /(node_modules)/,
@@ -266,6 +267,7 @@ module.exports = (webpackEnv) => {
                 },
               ].filter(Boolean),
             },
+            // (2)
             {
               test: /\.(ts|tsx)$/,
               exclude: /(node_modules)/,
@@ -287,21 +289,22 @@ module.exports = (webpackEnv) => {
                 },
               ].filter(Boolean),
             },
-            // .module.css (2), .css (3), .module.scss (4), .scss (5)
+            // .module.css (3), .css (4), .module.scss (5), .scss (6)
             ...getStyleLoaders(isEnvProduction),
+            // (7)
             isEnvProduction && {
               test: path.join(
                 redwoodPaths.base,
                 'node_modules/@redwoodjs/router/dist/splash-page'
               ),
               use: 'null-loader',
             },
-            // (6)
+            // (8)
             {
               test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
               loader: 'file-loader',
               options: {
-                name: 'static/media/[name].[hash:8].[ext]',
+                name: 'static/media/[name].[contenthash:8].[ext]',
               },
             },
           ].filter(Boolean),

packages/core/package.json

@@ -35,46 +35,46 @@
     "@types/node": "^14.6.0",
     "@types/react": "17.0.3",
     "@types/react-dom": "^17.0.1",
-    "@types/webpack": "^4.41.11",
+    "@types/webpack": "^5.28.0",
     "babel-jest": "^26.3.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-auto-import": "1.1.0",
     "babel-plugin-graphql-tag": "3.2.0",
     "babel-plugin-inline-react-svg": "2.0.1",
     "babel-plugin-module-resolver": "4.1.0",
-    "copy-webpack-plugin": "^6.1.0",
+    "copy-webpack-plugin": "^8.1.1",
     "core-js": "3.10.1",
     "css-loader": "^4.2.2",
-    "css-minimizer-webpack-plugin": "^1.2.0",
-    "dotenv-webpack": "^2.0.0",
-    "error-overlay-webpack-plugin": "^0.4.1",
+    "css-minimizer-webpack-plugin": "^2.0.0",
+    "dotenv-webpack": "^7.0.2",
+    "error-overlay-webpack-plugin": "^0.4.2",
     "esbuild": "0.11.13",
     "esbuild-loader": "^2.10.0",
     "file-loader": "^6.0.0",
     "findup-sync": "^4.0.0",
     "glob": "7.1.6",
     "graphql": "^15.3.0",
     "graphql-tag": "^2.10.3",
-    "html-webpack-plugin": "^4.0.2",
+    "html-webpack-plugin": "^5.3.1",
     "jest": "^26.4.2",
     "jest-watch-typeahead": "^0.6.3",
     "lodash.escaperegexp": "^4.1.2",
-    "mini-css-extract-plugin": "^1.4.1",
+    "mini-css-extract-plugin": "^1.5.1",
     "null-loader": "^4.0.1",
     "prisma": "2.21.2",
     "react-refresh": "^0.10.0",
     "style-loader": "^1.1.3",
     "svg-react-loader": "^0.4.6",
-    "terser-webpack-plugin": "^4.2.3",
+    "terser-webpack-plugin": "^5.1.1",
     "typescript": "^4.1.3",
     "url-loader": "4.1.0",
-    "webpack": "^4.42.1",
-    "webpack-bundle-analyzer": "^3.6.1",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3",
-    "webpack-manifest-plugin": "^3.0.0",
-    "webpack-merge": "^5.1.2",
-    "webpack-retry-chunk-load-plugin": "^1.4.0",
+    "webpack": "^5.36.1",
+    "webpack-bundle-analyzer": "^4.4.1",
+    "webpack-cli": "^4.6.0",
+    "webpack-dev-server": "^3.11.2",
+    "webpack-manifest-plugin": "^3.1.1",
+    "webpack-merge": "^5.7.3",
+    "webpack-retry-chunk-load-plugin": "^2.2.0",
     "whatwg-fetch": "^3.5.0"
   },
   "devDependencies": {