update project

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "mprober"
-version = "0.11.0-beta.11"
+version = "0.11.0-beta.12"
 authors = ["Magic Len <[email protected]>"]
 edition = "2021"
 repository = "https://github.com/magiclen/m-prober"

magiclen-prober-webpack/.npmrc

@@ -1 +1 @@
-package-lock=false # to prevent `npm link` from being removed after `npm install whatever`
+package-lock=false

magiclen-prober-webpack/README.md

@@ -1,9 +1,11 @@
 ### Getting Start
 
 ```bash
-sudo npm -g install git+ssh://[email protected]:magiclen/web-fonts.git
+mkdir -p ~/TypeScriptProjects
+cd ~/TypeScriptProjects
+git clone --depth [email protected]:magiclen/web-fonts.git
 ```
 
 ```bash
-npm link web-fonts
+npm i file:~/TypeScriptProjects/web-fonts
 ```

magiclen-prober-webpack/package.json

@@ -1,12 +1,12 @@
 {
   "name": "mprober",
-  "version": "0.10.1",
+  "version": "0.11.0-beta.12",
   "description": "This program aims to collect Linux system information including hostname, kernel version, uptime, RTC time, load average, CPU, memory, network interfaces and block devices. It can be used not only as a normal CLI tool, but also a web application with a front-end webpage and useful HTTP APIs.",
   "private": true,
   "main": "src/app.js",
   "scripts": {
     "build": "webpack --mode production",
-    "dev": "webpack --mode development"
+    "build:dev": "webpack --mode development"
   },
   "repository": {
     "type": "git",
@@ -29,27 +29,26 @@
     "@babel/core": "^7.8.7",
     "@babel/preset-env": "^7.8.7",
     "@babel/register": "^7.8.6",
-    "@fortawesome/fontawesome-free": "^5.9.0",
-    "autoprefixer": "^9.7.4",
+    "@fortawesome/fontawesome-free": "^5.15.4",
+    "autoprefixer": "^10.4.7",
     "babel-loader": "^8.0.6",
-    "bootstrap": "^4.3.1",
-    "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^3.0.0",
-    "cssnano": "^4.1.10",
-    "file-loader": "^6.0.0",
-    "glob": "^7.1.4",
-    "mini-css-extract-plugin": "^0.9.0",
-    "node-sass": "^4.12.0",
-    "postcss-loader": "^3.0.0",
-    "purgecss-webpack-plugin": "^2.1.0",
-    "sass-loader": "^8.0.2",
-    "terser-webpack-plugin": "^3.0.1",
-    "webpack": "^4.42.0",
-    "webpack-cli": "^3.3.4"
+    "bootstrap": "^4.6.1",
+    "css-loader": "^6.7.1",
+    "cssnano": "^5.1.9",
+    "glob": "^8.0.3",
+    "mini-css-extract-plugin": "^2.6.0",
+    "node-sass": "^7.0.1",
+    "postcss-loader": "^7.0.0",
+    "purgecss-webpack-plugin": "^4.1.3",
+    "sass-loader": "^13.0.0",
+    "terser-webpack-plugin": "^5.3.1",
+    "webpack": "^5.72.1",
+    "webpack-cli": "^4.9.2"
   },
   "dependencies": {
     "jquery": "^3.4.1",
     "popper.js": "^1.15.0",
-    "vue": "^2.6.10"
+    "vue": "^2.6.14",
+    "web-fonts": "file:~/TypeScriptProjects/web-fonts"
   }
 }

magiclen-prober-webpack/src/app.js

@@ -3,7 +3,7 @@ import 'bootstrap/js/dist/collapse';
 import 'bootstrap/js/dist/modal';
 import Vue from 'vue';
 
-import {applyRobotoMono} from 'web-fonts/src/js/roboto-mono';
+import {applyRobotoMono} from 'web-fonts/lib/roboto-mono';
 
 import './app.scss';
 

magiclen-prober-webpack/src/font-roboto-mono.scss

@@ -0,0 +1,2 @@
+$font-path: "~web-fonts/src/fonts/";
+@import "node_modules/web-fonts/src/scss/roboto-mono";

magiclen-prober-webpack/webpack.config.js

@@ -1,4 +1,3 @@
-const {CleanWebpackPlugin} = require('clean-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const TerserPlugin = require('terser-webpack-plugin');
@@ -18,20 +17,26 @@ function collectWhitelist() {
 module.exports = {
     entry: {
         'bundle': './src/app.js',
-        'font-roboto-mono': './src/font-roboto-mono.js',
+        'font-roboto-mono': './src/font-roboto-mono.scss',
     },
     output: {
         filename: './js/[name].min.js',
         libraryTarget: "umd",
+        clean: true,
     },
     plugins: [
-        new CleanWebpackPlugin(),
         new MiniCssExtractPlugin({
             filename: './css/[name].min.css',
         }),
         new PurgecssPlugin({
-            whitelist: collectWhitelist,
             paths: glob.sync(`${PATHS.views}/**/*`, {nodir: true}),
+            safelist() {
+                return {
+                    standard: collectWhitelist(),
+                    deep: [],
+                    greedy: []
+                }
+            }
         })
     ],
     module: {
@@ -48,61 +53,39 @@ module.exports = {
             {
                 test: /\.(sa|sc|c)ss$/,
                 use: [
+                    { loader: MiniCssExtractPlugin.loader },
+                    "css-loader",
                     {
-                        loader: MiniCssExtractPlugin.loader,
-                    },
-                    'css-loader',
-                    {
-                        loader: 'postcss-loader',
+                        loader: "postcss-loader",
                         options: {
-                            plugins: function () {
-                                return [
-                                    require('autoprefixer'),
-                                    require('cssnano')({preset: ['default', {discardComments: {removeAll: true}}]})
-                                ];
-                            }
-                        }
+                            postcssOptions: {
+                                plugins: [
+                                    require("autoprefixer"),
+                                    require("cssnano")({ preset: ["default", { discardComments: { removeAll: true } }] }),
+                                ],
+                            },
+                        },
                     },
-                    'sass-loader',
+                    "sass-loader",
                 ],
             },
             {
                 test: /\.(eot|woff|woff2|[ot]tf)$/,
-                use: [{
-                    loader: 'file-loader',
-                    options: {
-                        name: '[name].[ext]',
-                        outputPath: './fonts/',
-                        publicPath: '../fonts/'
-                    }
-                }]
+                type: 'asset/resource',
+                generator: {
+                    filename: 'fonts/[name][ext]',
+                }
             },
             {
                 test: /.*font.*\.svg$/,
-                use: [{
-                    loader: 'file-loader',
-                    options: {
-                        name: '[name].[ext]',
-                        outputPath: './fonts/',
-                        publicPath: '../fonts/'
-                    }
-                }]
+                type: 'asset/resource',
+                generator: {
+                    filename: 'fonts/[name][ext]',
+                }
             }
         ]
     },
-    optimization: {
-        minimizer: [
-            new TerserPlugin({
-                cache: true,
-                parallel: true,
-                terserOptions: {
-                    output: {
-                        comments: false,
-                    }
-                }
-            })
-        ],
-    },
+    optimization: { minimizer: [new TerserPlugin({ extractComments: false, terserOptions: { format: { comments: false } } })] },
     resolve: {
         alias: {
             'vue$': 'vue/dist/vue.esm.js'