Leap forward all dependencies and upgrade to Webpack 5

.nvmrc

@@ -1 +1 @@
-8.17.0
+14.17.1

netlify.toml

@@ -1,6 +1,5 @@
 [build.environment]
-  YARN_VERSION = "1.12.1"
-  NPM_VERSION = "6.4.1"
+  NPM_VERSION = "7.23.0"
 
 [build]
   command = "npm run build"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "victor-hugo",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Victor Hugo is a Hugo boilerplate for creating truly epic websites!",
   "repository": "netlify/victor-hugo",
   "main": "index.js",
@@ -22,43 +22,43 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.12.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
+    "@babel/core": "^7.15.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
     "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/register": "^7.12.1",
-    "assets-webpack-plugin": "^3.9.7",
+    "@babel/preset-env": "^7.15.6",
+    "@babel/register": "^7.15.3",
+    "assets-webpack-plugin": "^7.1.1",
     "babel-eslint": "^10.0.2",
-    "babel-loader": "^8.1.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^5.0.3",
-    "cross-env": "^5.2.0",
-    "css-loader": "^3.5.3",
-    "eslint": "^6.7.2",
-    "eslint-plugin-import": "^2.22.1",
-    "exports-loader": "^0.7.0",
-    "fancy-log": "^1.3.2",
-    "file-loader": "^4.1.0",
-    "hugo-bin": "^0.63.0",
-    "imports-loader": "^0.8.0",
-    "mini-css-extract-plugin": "^0.12.0",
-    "node-sass": "^4.13.1",
+    "babel-loader": "^8.2.2",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^9.0.1",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.2.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-import": "^2.24.2",
+    "exports-loader": "^3.0.0",
+    "fancy-log": "^1.3.3",
+    "file-loader": "^6.2.0",
+    "hugo-bin": "^0.76.1",
+    "imports-loader": "^3.0.0",
+    "mini-css-extract-plugin": "^2.3.0",
     "npm-run-all": "^4.1.5",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "css-minimizer-webpack-plugin": "^3.0.2",
     "plugin-error": "^1.0.1",
-    "postcss-import": "^12.0.1",
-    "postcss-loader": "^3.0.0",
+    "postcss-import": "^14.0.2",
+    "postcss-loader": "^6.1.1",
     "postcss-preset-env": "^6.7.0",
-    "rimraf": "^3.0.0",
-    "sass-loader": "^8.0.0",
-    "style-loader": "^1.3.0",
-    "uglifyjs-webpack-plugin": "^2.1.3",
-    "url-loader": "^2.1.0",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.0",
-    "webpack-merge": "^4.1.4",
-    "whatwg-fetch": "^3.0.0"
+    "rimraf": "^3.0.2",
+    "sass": "^1.41.0",
+    "sass-loader": "^12.1.0",
+    "style-loader": "^3.2.1",
+    "terser-webpack-plugin": "^5.2.4",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.52.1",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.2.1",
+    "webpack-merge": "^5.8.0",
+    "whatwg-fetch": "^3.6.2"
   },
   "resolutions": {
     "natives": "1.1.6"

webpack.common.js

@@ -17,22 +17,25 @@ module.exports = {
     rules: [
       {
         test: /\.((png)|(eot)|(woff)|(woff2)|(ttf)|(svg)|(gif))(\?v=\d+\.\d+\.\d+)?$/,
-        loader: "file-loader?name=/[hash].[ext]"
-      },
-
-      {test: /\.json$/, loader: "json-loader"},
-
+        use: { loader: "file-loader?name=/[contenthash].[ext]" }
+      },  
+      {test: /\.json$/, use: {loader: "json-loader"}},
       {
-        loader: "babel-loader",
         test: /\.js?$/,
         exclude: /node_modules/,
-        query: {cacheDirectory: true}
+        use: {
+          loader: "babel-loader",
+          options: {
+            cacheDirectory: true
+          }
+        }
       },
-
       {
         test: /\.(sa|sc|c)ss$/,
         exclude: /node_modules/,
-        use: ["style-loader", MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "sass-loader"]
+        use: [
+          MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "sass-loader"
+        ],
       }
     ]
   },
@@ -45,15 +48,16 @@ module.exports = {
     new AssetsPlugin({
       filename: "webpack.json",
       path: path.join(process.cwd(), "site/data"),
-      prettyPrint: true
+      prettyPrint: true,
+      removeFullPathAutoPrefix: true
     }),
 
-    new CopyWebpackPlugin([
-      {
-        from: "./src/fonts/",
-        to: "fonts/",
-        flatten: true
+    new CopyWebpackPlugin(
+      { 
+        patterns: [
+          { from: './src/fonts', to: 'fonts/' },
+        ]
       }
-    ])
+    )
   ]
 };

webpack.dev.js

@@ -1,4 +1,4 @@
-const merge = require("webpack-merge");
+const { merge } = require("webpack-merge");
 const path = require("path");
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
@@ -14,11 +14,15 @@ module.exports = merge(common, {
   },
 
   devServer: {
+    static: {
+      directory: path.resolve(__dirname, "./dist"),
+      staticOptions: {},
+      serveIndex: true,
+      watch: true,
+    },
+
+
     port: process.env.PORT || 3000,
-    contentBase: path.join(process.cwd(), "./dist"),
-    watchContentBase: true,
-    quiet: false,
-    open: true,
     historyApiFallback: {
       rewrites: [{from: /./, to: "404.html"}]
     }

webpack.prod.js

@@ -1,32 +1,31 @@
-const merge = require("webpack-merge");
-const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
-const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const { merge } = require('webpack-merge')
+const TerserPlugin = require("terser-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 
 const common = require("./webpack.common.js");
 
 module.exports = merge(common, {
   mode: "production",
 
   output: {
-    filename: "[name].[hash:5].js",
-    chunkFilename: "[id].[hash:5].css"
+    filename: "[name].[contenthash:5].js",
+    chunkFilename: "[id].[contenthash:5].css"
   },
 
   optimization: {
+    minimize: true,
     minimizer: [
-      new UglifyJsPlugin({
-        cache: true,
-        parallel: true,
-        sourceMap: true
+      new TerserPlugin({
+        parallel: true
       }),
 
       new MiniCssExtractPlugin({
-        filename: "[name].[hash:5].css",
-        chunkFilename: "[id].[hash:5].css"
+        filename: "[name].[contenthash:5].css",
+        chunkFilename: "[id].[contenthash:5].css"
       }),
 
-      new OptimizeCSSAssetsPlugin({})
+      new CssMinimizerPlugin({})
     ]
   }
 });