Merge branch 'webpack-upgrade' into develop

Makefile

@@ -39,7 +39,7 @@ docs-server: docs
 	cd docs/_build/html/ && ../../../venv/bin/python -m http.server $(PORT)
 
 webui: venv-dev
-	cd glances/outputs/static/ && npm install && npm audit fix && npm run build
+	cd glances/outputs/static/ && npm ci && npm run build
 
 run: venv
 	./venv/bin/python -m glances -C ./conf/glances.conf

glances/outputs/static/README.md

@@ -7,7 +7,7 @@ You must run the following command from the `glances/outputs/static/` directory.
 ## Install dependencies
 
 ```bash
-$ npm install
+$ npm ci
 ```
 
 ## Build assets

glances/outputs/static/package.json

@@ -1,31 +1,30 @@
 {
-  "private": true,
-  "dependencies": {
-    "angular": "^1.8.0",
-    "angular-hotkeys": "^1.7.0",
-    "bootstrap": "^3.4.1",
-    "favico.js": "^0.3.10",
-    "lodash": "^4.17.21"
-  },
-  "devDependencies": {
-    "clean-webpack-plugin": "^0.1.19",
-    "copy-webpack-plugin": "^4.6.0",
-    "css-loader": "^0.28.11",
-    "del": "^2.2.1",
-    "exports-loader": "^0.7.0",
-    "file-loader": "^1.1.11",
-    "html-loader": "^0.5.5",
-    "less": "^3.10.3",
-    "less-loader": "^4.1.0",
-    "ngtemplate-loader": "^2.0.1",
-    "node-sass": "^4.14.0",
-    "sass-loader": "^6.0.7",
-    "style-loader": "^0.20.3",
-    "url-loader": "^0.6.2",
-    "webpack": "^3.12.0"
-  },
-  "scripts": {
-    "build": "webpack --bail --progress --profile",
-    "watch": "webpack --bail --progress --profile --watch"
-  }
+    "private": true,
+    "dependencies": {
+        "angular": "^1.8.2",
+        "angular-hotkeys": "^1.7.0",
+        "bootstrap": "^3.4.1",
+        "favico.js": "^0.3.10",
+        "lodash": "^4.17.21"
+    },
+    "devDependencies": {
+        "clean-webpack-plugin": "^4.0.0",
+        "copy-webpack-plugin": "^9.0.1",
+        "css-loader": "^6.5.1",
+        "del": "^6.0.0",
+        "html-loader": "^3.0.1",
+        "less": "^4.0.0",
+        "less-loader": "^10.2.0",
+        "ngtemplate-loader": "^2.1.0",
+        "node-sass": "^6.0.1",
+        "sass-loader": "^12.3.0",
+        "style-loader": "^3.3.1",
+        "url-loader": "^4.1.1",
+        "webpack": "^5.63.0",
+        "webpack-cli": "^4.9.1"
+    },
+    "scripts": {
+        "build": "webpack --progress",
+        "watch": "webpack --progress --watch"
+    }
 }

glances/outputs/static/webpack.config.js

@@ -2,19 +2,23 @@
 const webpack = require("webpack");
 const path = require("path");
 
-const CleanWebpackPlugin = require("clean-webpack-plugin");
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 
 module.exports = {
+    mode: 'development',
     entry: "./js/app.js",
     output: {
         path: path.join(__dirname, "public"),
         filename: "glances.js",
         sourceMapFilename: "glances.map.js",
     },
-    devtool: "#source-map",
+    optimization: {
+        minimize: false,
+    },
+    devtool: "source-map",
     module: {
-        loaders: [
+        rules: [
             {
                 test: /\.scss$/,
                 use: [{
@@ -37,29 +41,28 @@ module.exports = {
             },
             {
                 test: /\.css$/,
-                loader: "style-loader!css-loader",
-            },
-            {
-                test: /\.(png|jpg|gif|svg|ttf|woff|woff2|eot)$/,
-                loader: "url-loader",
-                options: {
-                    limit: 10000,
-                }
+                use: [{
+                    loader: "style-loader",
+                }, {
+                    loader: "css-loader",
+                }]
             },
             {
                 test: /\.html/,
-                loader: "ngtemplate-loader!html-loader"
-            },
-            {
-                test: require.resolve("angular"),
-                loader: "exports-loader?window.angular"
-            },
+                use: [{
+                    loader: "ngtemplate-loader",
+                }, {
+                    loader: "html-loader",
+                }]
+            }
         ],
     },
     plugins: [
-        new CleanWebpackPlugin("./public/*.*"),
-        new CopyWebpackPlugin([
-            { from: "./images/favicon.ico" }
-        ]),
+        new CleanWebpackPlugin(),
+        new CopyWebpackPlugin({
+            patterns: [
+                { from: "./images/favicon.ico" }
+            ]
+        }),
     ]
-};
+};