chore (deps): upgrade webpack

docker/Dockerfile

@@ -5,7 +5,7 @@ RUN apk add git && \
     git clone --depth 1 https://github.com/mickael-kerjean/filestash
 
 # STEP2: BUILD THE FRONTEND
-FROM node:13-alpine AS builder_frontend
+FROM node:18-alpine AS builder_frontend
 WORKDIR /home/
 COPY --from=builder_prepare /home/filestash/ ./
 RUN apk add make git && \

package.json

@@ -5,7 +5,7 @@
   "repository": "https://github.com/mickael-kerjean/filestash",
   "main": "server/index.js",
   "scripts": {
-    "start": "webpack --watch",
+    "start": "NODE_ENV=development webpack --watch",
     "build": "webpack",
     "test": "jest ./client/",
     "lint": "eslint ./client/"
@@ -38,7 +38,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.16.5",
     "babel-core": "^6.13.2",
-    "babel-loader": "^6.2.10",
+    "babel-loader": "^7.1.5",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-polyfill": "^6.23.0",
@@ -46,22 +46,26 @@
     "babel-preset-react": "^6.11.1",
     "babel-preset-stage-2": "^6.24.1",
     "babelify": "^8.0.0",
+    "buffer": "^6.0.3",
     "compression-webpack-plugin": "^1.1.11",
     "copy-webpack-plugin": "^4.5.2",
+    "crypto-browserify": "^3.12.0",
     "css-loader": "^0.28.10",
     "eslint": "^8.5.0",
     "eslint-config-google": "^0.14.0",
     "eslint-plugin-react": "^7.27.1",
     "html-loader": "^0.4.5",
-    "html-webpack-plugin": "^3.2.0",
-    "node-sass": "^4.10.0",
-    "sass-loader": "^6.0.6",
-    "sass-variable-loader": "^0.1.2",
+    "html-webpack-plugin": "^5.5.3",
+    "path-browserify": "^1.0.1",
+    "sass": "^1.22.10",
+    "sass-loader": "^7.2.0",
+    "stream-browserify": "^3.0.0",
     "style-loader": "^0.20.2",
     "uglifyjs-webpack-plugin": "^1.2.5",
     "url-loader": "^0.6.2",
-    "webpack": "^2.7.0",
+    "webpack": "^5.87.0",
     "webpack-bundle-analyzer": "^3.3.2",
+    "webpack-cli": "^5.1.4",
     "worker-loader": "^2.0.0"
   }
 }

webpack.config.js

@@ -25,19 +25,26 @@ const config = {
             },
             {
                 test: /\.html$/,
-                loader: "html-loader",
+                use: "html-loader",
             },
             {
                 test: /\.woff2$/,
-                loader: "woff-loader",
+                use: "woff-loader",
             },
             {
                 test: /\.scss$/,
-                loaders: ["style-loader", "css-loader", "sass-loader"],
+                use: [
+                    { loader: "style-loader" },
+                    { loader: "css-loader" },
+                    { loader: "sass-loader" },
+                ],
             },
             {
                 test: /\.css$/,
-                loaders: ["style-loader", "css-loader"],
+                use: [
+                    { loader: "style-loader" },
+                    { loader: "css-loader" },
+                ],
             },
             {
                 test: /\.(pdf|jpg|png|gif|svg|ico|woff|woff2|eot|ttf)$/,
@@ -54,7 +61,6 @@ const config = {
         new webpack.DefinePlugin({
             "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
         }),
-        new webpack.optimize.OccurrenceOrderPlugin(),
         new HtmlWebpackPlugin({
             template: path.join(__dirname, "client", "index.html"),
             inject: true,
@@ -79,6 +85,15 @@ const config = {
         ]),
         // new BundleAnalyzerPlugin()
     ],
+    resolve: {
+        fallback: {
+            "path": require.resolve("path-browserify"),
+            "crypto": require.resolve("crypto-browserify"),
+            "buffer": require.resolve("buffer/"),
+            "stream": require.resolve("stream-browserify"),
+        },
+    },
+    mode: process.env.NODE_ENV || "production",
 };
 
 
@@ -102,7 +117,7 @@ if (process.env.NODE_ENV === "production") {
         minRatio: 0.8,
     }));
 } else {
-    config.devtool = "#inline-source-map";
+    config.devtool = "inline-source-map";
 }
 
 module.exports = config;