update packages to latest versions

package.json

@@ -7,7 +7,7 @@
     "node": ">=12.16.0"
   },
   "scripts": {
-    "serve": "serve",
+    "serve": "serve dist",
     "build": "webpack --config webpack.prod.js",
     "start": "webpack-dev-server --open --config webpack.dev.js",
     "watch": "webpack --watch"
@@ -24,21 +24,21 @@
   },
   "homepage": "https://github.com/<github-username>/<repo-name>",
   "devDependencies": {
-    "@babel/core": "7.2.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^3.4.2",
-    "extract-loader": "^4.0.3",
-    "file-loader": "^6.0.0",
-    "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^3.2.0",
-    "mini-css-extract-plugin": "^0.9.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "serve": "^11.2.0",
-    "style-loader": "^1.1.3",
-    "terser-webpack-plugin": "^2.3.5",
-    "webpack": "^4.41.6",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3",
-    "webpack-merge": "^4.2.2"
+    "@babel/core": "7.18.5",
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^6.7.1",
+    "extract-loader": "^5.1.0",
+    "file-loader": "^6.2.0",
+    "html-loader": "^3.1.2",
+    "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.6.1",
+    "optimize-css-assets-webpack-plugin": "^6.0.1",
+    "serve": "^13.0.2",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.3",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.2",
+    "webpack-merge": "^5.8.0"
   }
 }

webpack.common.js

@@ -46,7 +46,7 @@ module.exports = {
     plugins: [
         new CleanWebpackPlugin(),
         new HtmlWebpackPlugin({
-            // title: "Webpack 4 Starter",
+            // title: "Webpack 5 Starter",
             template: "./src/index.html",
             inject: true,
             minify: {

webpack.dev.js

@@ -1,16 +1,20 @@
 const path = require("path");
-const merge = require("webpack-merge");
+const { merge } = require("webpack-merge");
 const common = require("./webpack.common.js");
 
 module.exports = merge(common, {
     mode: "development",
     devtool: "inline-source-map",
     devServer: {
-        index: "index.html",
-        contentBase: path.join(__dirname, "dist"),
         compress: true,
-        hot: true, //Hot module replacement
-        writeToDisk: true,
-        open: "chrome" //open in chrome
+        hot: "only", //Hot module replacement
+        open: "chrome", //open in chrome
+        devMiddleware: {
+            index: "index.html",
+            writeToDisk: true,
+        },
+        static: {
+            directory: path.join(__dirname, "dist"),
+        }
     },
 });

webpack.prod.js

@@ -1,4 +1,4 @@
-const merge = require("webpack-merge");
+const { merge } = require("webpack-merge");
 const common = require("./webpack.common.js");
 const TerserJSPlugin = require("terser-webpack-plugin");
 const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
@@ -7,7 +7,6 @@ module.exports = merge(common, {
     optimization: {
         minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})]
     },
-
     mode: "production",
     devtool: "source-map"
 });