Update to recent dependencies

Update to recent webpack and other nodejs dependencies.

Bug-AGL: SPEC-4248, SPEC-4355
Signed-off-by: Jose Dapena Paz <jdapena@igalia.com>
Change-Id: I65ae288416fffc8798f97fb5f11462f7ac23cc58

2 files changed, 54 insertions, 77 deletions

diff --git a/package.json b/package.json
index 32ecd4d..c31b283 100644
--- a/package.json
+++ b/package.json
@@ -18,26 +18,23 @@
         "automotivegradelinux"
     ],
     "devDependencies": {
-        "@fortawesome/fontawesome-free": "^5.11.2",
-        "clean-webpack-plugin": "^1.0.1",
-        "copy-webpack-plugin": "^4.6.0",
-        "css-loader": "^2.1.0",
-        "file-loader": "^4.0.0",
-        "html-webpack-plugin": "^3.2.0",
-        "image-webpack-loader": "^5.0.0",
-        "mini-css-extract-plugin": "^0.5.0",
-        "node-sass": "^4.12.0",
-        "sass-loader": "^7.1.0",
-        "style-loader": "^0.23.1",
-        "uglifyjs-webpack-plugin": "^2.1.1",
-        "webpack": "^4.29.5",
-        "webpack-cli": "^3.2.3",
-        "webpack-dev-server": "^3.7.2",
-        "zip-webpack-plugin": "^3.0.0"
+        "@fortawesome/fontawesome-free": "^6.1.1",
+        "clean-webpack-plugin": "^4.0.0",
+        "copy-webpack-plugin": "^10.2.4",
+        "css-loader": "^6.7.1",
+        "file-loader": "^6.2.0",
+        "html-webpack-plugin": "^5.5.0",
+        "mini-css-extract-plugin": "^2.6.0",
+        "node-sass": "^7.0.1",
+        "sass-loader": "^12.6.0",
+        "style-loader": "^3.3.1",
+        "uglify-js": "^3.15.4",
+        "webpack": "^5.72.0",
+        "webpack-cli": "^4.9.2",
+        "webpack-dev-server": "^4.8.1"
     },
     "dependencies": {
-        "mustache": "^3.1.0",
-        "bootstrap": "4.4.1",
-        "agl-js-api": "https://github.com/AGL-web-applications/agl-js-api.git#master"
+        "mustache": "^4.2.0",
+        "bootstrap": "5.1.3"
     }
 }
diff --git a/webpack.config.js b/webpack.config.js
index 479a867..95382cb 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,11 +1,9 @@
 const path = require('path');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
-const ZipPlugin = require('zip-webpack-plugin');
-
 
 module.exports = {
     mode: 'production',
@@ -20,35 +18,38 @@ module.exports = {
         library: '[name]'
     },
     optimization: {
-        minimizer: [new UglifyJsPlugin()],
+        minimize: true,
+        minimizer: [
+            new TerserPlugin({
+                minify: TerserPlugin.uglifyJsMinify,
+                terserOptions: {}
+            })
+        ],
     },
     plugins: [
-        new CleanWebpackPlugin(['dist']),
-        new CopyPlugin([
-            {
-                from: 'src/icon.*',
-                flatten: true
-            },
-            {
-                from: 'src/config.xml',
-                flatten: true
-            },
-            {
-                from: 'src/mockups/*',
-                to: 'mockups/',
-                flatten: true
-            },
-            {
-                from: 'src/images/*',
-                to: 'images/',
-                flatten: true
-            },
-            {
-                from: 'src/templates/*',
-                to: 'templates/',
-                flatten: true
-            }
-        ]),
+        new CleanWebpackPlugin({
+            cleanAfterEveryBuildPatterns: ['dist']
+        }),
+        new CopyPlugin({
+            patterns: [
+                {
+                    from: 'src/icon.*',
+                    to: "[name][ext]"
+                },
+                {
+                    from: 'src/appinfo.json',
+                    to: "appinfo.json"
+                },
+                {
+                    from: 'src/images/*',
+                    to: 'images/[name][ext]'
+                },
+                {
+                    from: 'src/templates/*',
+                    to: 'templates/[name][ext]'
+                }
+            ]
+        }),
         new HtmlWebpackPlugin({
             template: 'src/index.html',
             filename: 'index.html',
@@ -56,13 +57,6 @@ module.exports = {
         }),
         new MiniCSSExtractPlugin({
             filename: 'app.css',
-            path: __dirname + '/dist'
-        }),
-        new ZipPlugin({
-            path: __dirname + '/package',
-            filename: 'mediaplayer',
-            extension: 'wgt',
-            exclude: []
         })
     ],
     module: {
@@ -92,33 +86,19 @@ module.exports = {
             },
             {
                 test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
-                use: [
-                    {
-                        loader: 'file-loader',
-                        options: {
-                            name: '[name].[ext]',
-                            outputPath: 'fonts/'
-                        }
-                    }
-                ]
+                type: 'asset/resource',
+                generator: {
+                    filename: 'fonts/[name][ext]'
+                }
             },
             {
                 test: /\.(gif|png|jpe?g|svg)$/i,
-                use: [
-                    'file-loader',
-                    {
-                        loader: "image-webpack-loader",
-                        options: {
-                            bypassOnDebug: true, // webpack@1.x
-                            disable: true, // webpack@2.x and newer
-                        },
-                    }
-                ]
+                type: 'asset/resource'
             }
         ]
     },
     devServer: {
-        contentBase: path.join(__dirname, 'dist'),
+        static: path.join(__dirname, 'dist'),
         compress: true,
         port: 9000
     }