Improve: Add progress bar to webpack build system with time estimates

node-update-notes.md

@@ -24,7 +24,7 @@ Node.js 22.x is currently in development and not yet released for production use
 - Some dependencies might need to be updated to their latest versions
 
 ## Update Steps
-1. Update Node.js version in package.json to 22.15.0
+1. Update Node.js version in package.json to 24.13.0
 2. Update npm version to 10.x (recommended for Node.js 22.x)
 3. Replace `node-sass` with `sass` in dependencies
 4. Update other dependencies to their latest compatible versions
@@ -89,6 +89,8 @@ For production environments, it is strongly recommended to use Node.js 20.x (LTS
 
 Each time you update Node.js or npm, record the changes here for tracking:
 
+### [2025-12-29] Node.js 22.11.1 → 24.13.0, npm 11.6.2
+
 ### [2025-11-18] Node.js 22.20.0 → 24.11.1, npm 10.9.3 → 11.6.2
 
 ### [2025-09-29] Node.js 22.19.0 → 22.20.0, npm 10.9.3

package.json

@@ -66,10 +66,11 @@
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^3.11.3",
     "webpack-merge": "^5.0.9",
+    "webpackbar": "^7.0.0",
     "wp-pot": "^1.9.8"
   },
   "engines": {
-    "node": "24.11.1",
+    "node": "24.13.0",
     "npm": "11.6.2"
   },
   "browserslist": [

webpack.dev.js

@@ -3,12 +3,19 @@ const { merge } = require('webpack-merge');
 
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const WebpackRTLPlugin = require('webpack-rtl-plugin');
+const WebpackBar = require('webpackbar');
 //const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 const devConfig = {
 	mode: 'development', // production | development
 	watch: true,
 	plugins: [
+		new WebpackBar({
+			name: 'Dev Build',
+			color: '#2196F3',
+			profile: true,
+			basic: false,
+		}),
 		new MiniCssExtractPlugin({
 			filename: '../css/[name].css',
 		}),

webpack.dev.vue.js

@@ -3,6 +3,7 @@ const { merge } = require('webpack-merge');
 
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const WebpackRTLPlugin = require('webpack-rtl-plugin');
+const WebpackBar = require('webpackbar');
 //const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const { vueEntries } = require('./webpack-entry-list.js');
 
@@ -11,6 +12,12 @@ const devConfig = {
 	watch: true,
 	entry: vueEntries,
 	plugins: [
+		new WebpackBar({
+			name: 'Vue Dev Build',
+			color: '#42B983',
+			profile: true,
+			basic: false,
+		}),
 		new MiniCssExtractPlugin({
 			filename: '../css/[name].css',
 		}),

webpack.prod.js

@@ -5,6 +5,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const WebpackRTLPlugin = require('webpack-rtl-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const FileManagerPlugin = require('filemanager-webpack-plugin');
+const WebpackBar = require('webpackbar');
 const { vueEntries } = require('./webpack-entry-list.js');
 
 const prodConfig = {
@@ -16,6 +17,12 @@ const prodConfig = {
 		['admin-settings-manager']: './assets/src/js/admin/settings-manager.js',
 	},
 	plugins: [
+		new WebpackBar({
+			name: 'Production Build',
+			color: '#4CAF50',
+			profile: true,
+			basic: false,
+		}),
 		new MiniCssExtractPlugin({
 			filename: '../css/[name].min.css',
 		}),
@@ -105,6 +112,12 @@ const devConfig = {
 	watch: true,
 	entry: vueEntries,
 	plugins: [
+		new WebpackBar({
+			name: 'Vue Dev Build',
+			color: '#42B983',
+			profile: true,
+			basic: false,
+		}),
 		new MiniCssExtractPlugin({
 			filename: '../css/[name].css',
 		}),