Update dependencies for webpack 5 migration

Signed-off-by: Mihaela Balutoiu <mbalutoiu@cloudbasesolutions.com>

.github/workflows/build.yml

@@ -39,7 +39,7 @@ jobs:
         env:
           NODE_OPTIONS: "--openssl-legacy-provider"
           NODE_ENV: development
-        run: npm run build
+        run: npm run build:dev
 
       - name: Run integration tests
         env:
@@ -67,4 +67,4 @@ jobs:
       - name: Production build
         env:
           NODE_OPTIONS: "--openssl-legacy-provider"
-        run: npm run build
+        run: npm run build:prod

Dockerfile

@@ -9,7 +9,7 @@ ENV NODE_ENV=production
 
 RUN corepack enable
 RUN yarn workspaces focus --all --production
-RUN npm run build
+RUN npm run build:prod
 
 ENTRYPOINT [ "npm", "run", "start" ]
 EXPOSE 3000

README.md

@@ -16,7 +16,7 @@ Web GUI for [coriolis](https://github.com/cloudbase/coriolis)
 
 Build the production version of the UI:
 
-- run `npm run build`
+- run `npm run build:prod`
 - run `npm run start` to start the server
 
 Your server will be running at `http://localhost:3000/` (the port is configurable through `PORT` environment variable)

package.json

@@ -8,7 +8,8 @@
   },
   "scripts": {
     "start": "node ./server",
-    "build": "webpack --config webpack.prod.js",
+    "build:dev": "webpack --config webpack.dev.js",
+    "build:prod": "webpack --config webpack.prod.js",
     "client-dev": "webpack-dev-server --config webpack.dev.js",
     "server-dev": "nodemon -e ts,js -w server/**/ -w .env",
     "server-debug": "node --inspect server",
@@ -70,14 +71,14 @@
     "babel-loader": "^8.0.6",
     "babel-plugin-styled-components": "^1.10.6",
     "body-parser": "^1.18.2",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^6.0.2",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^13.0.0",
     "dotenv": "^8.2.0",
     "express": "^4.17.3",
     "file-loader": "^4.2.0",
     "file-saver": "^2.0.2",
     "fs": "^0.0.1-security",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^5.6.3",
     "js-base64": "^3.5.2",
     "js-cookie": "^2.2.1",
     "jszip": "^3.8.0",
@@ -108,10 +109,10 @@
     "ts-node": "^10.4.0",
     "typescript": "^4.5.3",
     "url-loader": "^4.1.0",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.9.0",
-    "webpack-merge": "^4.2.2"
+    "webpack": "^5.94.0",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.0",
+    "webpack-merge": "^6.0.1"
   },
   "resolutions": {
     "ansi-regex": "^5.0.1",

webpack.common.js

@@ -14,11 +14,13 @@ const envKeys = Object.keys(env).reduce((prev, next) => {
   return prev;
 }, {});
 
+envKeys['process.env'] = JSON.stringify(env);
+
 module.exports = {
   entry: "./src/index.tsx",
   output: {
-    filename: "[name].[hash].bundle.js",
-    chunkFilename: "[name].[hash].bundle.js",
+    filename: "[name].[contenthash].bundle.js",
+    chunkFilename: "[name].[contenthash].bundle.js",
     path: path.resolve(__dirname, "dist"),
     publicPath: "/",
   },
@@ -26,8 +28,20 @@ module.exports = {
   plugins: [
     new webpack.DefinePlugin(envKeys),
     new CleanWebpackPlugin(),
-    new CopyPlugin({ patterns: ["./public"] }),
-    new HtmlWebpackPlugin({ template: "./public/index.html" }),
+    new CopyPlugin({
+      patterns: [
+        {
+          from: path.resolve(__dirname, "public"),
+          globOptions: {
+            ignore: ["**/index.html"],
+          },
+          noErrorOnMissing: true,
+        },
+      ]
+    }),
+    new HtmlWebpackPlugin({
+      template: "./public/index.html"
+    }),
   ],
   resolve: {
     modules: [__dirname, "src", "node_modules"],
@@ -45,10 +59,14 @@ module.exports = {
       },
       {
         test: /\.(png|jpe?g|svg|woff2?|ttf|eot)$/,
-        loader: "url-loader",
-        options: {
-          limit: 8192,
-          name: "./assets/[hash].[ext]",
+        type: "asset",
+        parser: {
+          dataUrlCondition: {
+            maxSize: 8192,
+          },
+        },
+        generator: {
+          filename: "assets/[name].[contenthash][ext]",
         },
       },
     ],

webpack.dev.js

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const merge = require("webpack-merge");
+const { merge } = require("webpack-merge");
 const common = require("./webpack.common");
 
 module.exports = merge(common, {
@@ -10,8 +10,8 @@ module.exports = merge(common, {
     hot: true,
     historyApiFallback: true,
     proxy: {
-      "/api": `http://localhost:${process.env.PORT || 3000}`,
-      "/proxy": `http://localhost:${process.env.PORT || 3000}`,
+      context: ["/api", "/proxy"],
+      target: `http://localhost:${process.env.PORT || 3000}`,
     },
     stats: "minimal",
   },

webpack.prod.js

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const merge = require("webpack-merge");
+const { merge } = require("webpack-merge");
 const common = require("./webpack.common");
 
 module.exports = merge(common, {