Upgrade all the things

.prettierignore

@@ -1,3 +1,2 @@
 # Ignore all HTML files:
-*.html
-*.js
+*.html

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": true
+}

package.json

@@ -4,27 +4,27 @@
     "zip": "node createZip.js",
     "prebuild": "npm run zip",
     "dev": "cross-env NODE_ENV=development webpack-dev-server",
-    "prod": "npm run zip && cross-env NODE_ENV=production webpack --no-progress"
+    "prod": "npm run zip && cross-env NODE_ENV=production webpack"
   },
   "devDependencies": {
-    "copy-webpack-plugin": "^5.0.2",
-    "cross-env": "^5.1",
-    "css-loader": "^0.28.10",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
-    "glob-all": "^3.1.0",
-    "html-webpack-plugin": "^3.0.6",
+    "copy-webpack-plugin": "^10.2.4",
+    "cross-env": "^7.0",
+    "css-loader": "^6.7.1",
+    "mini-css-extract-plugin": "^2.6.0",
+    "glob-all": "^3.3.0",
+    "html-webpack-plugin": "^5.5.0",
     "postcss": "^8.4.13",
-    "postcss-loader": "^2.1.1",
-    "style-loader": "^0.20.3",
+    "postcss-loader": "^6.2.1",
+    "style-loader": "^3.3.1",
     "tailwindcss": "^3.0.24",
-    "webpack": "^4.29.6",
-    "webpack-cli": "^3.3.0",
-    "webpack-dev-server": "^3.2.1"
+    "webpack": "^5.72.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.9.0"
   },
   "dependencies": {
     "alpinejs": "^3.10.2",
-    "archiver": "^5.0.0",
-    "autoprefixer": "^10.4.6",
-    "typeface-roboto-mono": "^0.0.75"
+    "archiver": "^5.3.1",
+    "autoprefixer": "^10.4.7",
+    "typeface-roboto-mono": "^1.1.13"
   }
 }

webpack.config.js

@@ -1,8 +1,7 @@
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 
-
 module.exports = {
   entry: "./src/css/tailwind.src.css",
   mode: process.env.NODE_ENV,
@@ -10,37 +9,28 @@ module.exports = {
     rules: [
       {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({
-          fallback: "style-loader",
-          use: [
-            { loader: "css-loader", options: { importLoaders: 2 } },
-            "postcss-loader",
-          ],
-        }),
+        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
       },
     ],
   },
   plugins: [
-    new ExtractTextPlugin("styles.css", {
-      disable: process.env.NODE_ENV === "development",
-    }),
+    new MiniCssExtractPlugin(),
     new HtmlWebpackPlugin({
       filename: "index.html",
       template: "src/index.html",
     }),
     /// Enable images folder
-    new CopyWebpackPlugin([
-      {
-        from: "src/images",
-        to: "images",
-      },
-    ]),
-    /// Enable js folder
-    new CopyWebpackPlugin([
-      {
-        from: "src/js",
-        to: "js",
-      },
-    ]),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: "src/images",
+          to: "images",
+        },
+        {
+          from: "src/js",
+          to: "js",
+        },
+      ],
+    }),
   ],
 };