Webpack refactoring

server/resources/package.json

@@ -3,27 +3,28 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "prod": "webpack -p",
-    "dev": "webpack -d",
-    "watch": "webpack -w -d"
+    "prod": "webpack --config webpack.prod.js",
+    "dev": "webpack --config webpack.dev.js",
+    "dev_watch": "webpack --config webpack.dev.js --watch",
+    "debug_bundle": "webpack --config webpack.debug_bundle.js"
   },
   "author": "",
   "license": "GPL3",
   "dependencies": {
-    "@babel/core": "^7.12.3",
+    "@babel/core": "^7.12.9",
     "@babel/plugin-transform-runtime": "^7.12.1",
-    "@babel/preset-env": "^7.12.1",
+    "@babel/preset-env": "^7.12.7",
     "@fortawesome/fontawesome-free": "^5.15.1",
-    "babel-loader": "^8.1.0",
-    "bootstrap": "^4.5.2",
+    "babel-loader": "^8.2.1",
+    "bootstrap": "^4.5.3",
     "bootstrap-cookie-alert": "^1.2.1",
     "bootstrap-datepicker": "^1.9.0",
     "bootstrap-toggle": "^2.2.2",
     "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^6.3.1",
+    "copy-webpack-plugin": "^6.3.2",
     "css-loader": "^4.3.0",
-    "expose-loader": "^1.0.1",
-    "file-loader": "^6.1.1",
+    "expose-loader": "^1.0.2",
+    "file-loader": "^6.2.0",
     "font-awesome": "^4.7.0",
     "howler": "^2.2.1",
     "jquery": "^3.5.1",
@@ -31,10 +32,17 @@
     "leaflet": "^1.7.1",
     "leaflet.locatecontrol": "^0.72.0",
     "popper.js": "^1.16.1",
-    "sass": "^1.27.0",
-    "sass-loader": "^10.0.3",
+    "sass": "^1.29.0",
+    "sass-loader": "^10.1.0",
     "style-loader": "^1.3.0",
     "time-input-polyfill": "^1.0.9",
-    "webpack": "^4.44.2"
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "webpack": "^4.44.2",
+    "webpack-assets-manifest": "^3.1.1",
+    "webpack-merge": "^5.4.0"
+  },
+  "devDependencies": {
+    "speed-measure-webpack-plugin": "^1.3.3",
+    "webpack-bundle-analyzer": "^4.1.0"
   }
 }

server/resources/src/main.js

@@ -4,7 +4,7 @@ import 'bootstrap';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import './main.css';
 import './font-awesome.scss';
-import '../node_modules/bootstrap-cookie-alert/cookiealert.css';  // TODO: migrate to Bootstrap Italia
+import '../node_modules/bootstrap-cookie-alert/cookiealert.css';
 import 'bootstrap-datepicker';
 import '../node_modules/bootstrap-toggle/css/bootstrap-toggle.css';
 import '../node_modules/bootstrap-toggle/js/bootstrap-toggle.js';
@@ -12,6 +12,11 @@ import '../node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css'
 import 'time-input-polyfill/auto';
 import 'jquery-pjax';
 
+console.log("Commit: "+process.env.GIT_VERSION);
+console.log("Date: "+process.env.GIT_AUTHOR_DATE);
+console.log("Bundle mode: "+process.env.BUNDLE_MODE);
+console.log("Bundle date: "+process.env.BUNDLE_DATE);
+
 $(document).pjax('a:not(.pjax_disable)', '#content', {timeout: 100000});
 $(document).on('pjax:start', function() {
   if(window.loadTable_interval !== undefined){

server/resources/webpack.common.js

@@ -1,7 +1,7 @@
 const path = require('path');
-var webpack = require('webpack');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
+const WebpackAssetsManifest = require('webpack-assets-manifest');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 module.exports = {
   entry: {
@@ -12,7 +12,7 @@ module.exports = {
   },
   output: {
     filename: (pathData) => {
-      return pathData.chunk.name === 'sw' ? '../../sw.js': '[name].js';
+      return pathData.chunk.name === 'sw' ? '../../sw.js': '[name].[contenthash].js';
     },
     path: path.resolve(__dirname, 'dist'),
     publicPath: '/resources/dist/',
@@ -25,17 +25,6 @@ module.exports = {
   },
   module: {
     rules: [
-      {
-        test: /\.m?js$/,
-        exclude: /(node_modules|bower_components)/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: ['@babel/preset-env'],
-            plugins: ['@babel/plugin-transform-runtime']
-          }
-        }
-      },
       {
         test: /\.css$/i,
         use: ['style-loader', 'css-loader'],
@@ -78,17 +67,14 @@ module.exports = {
   },
   plugins: [
     new CleanWebpackPlugin(),
-    new webpack.ProvidePlugin({
-        $: 'jquery',
-        popper: 'popper.js'
-    }),
     new CopyPlugin({
       patterns: [
         { from: 'node_modules/leaflet/dist/images', to: '.', noErrorOnMissing: true }
       ],
     }),
+    new WebpackAssetsManifest()
   ],
   optimization: {
     mergeDuplicateChunks: true
-  },
+  }
 };

server/resources/webpack.debug_bundle.js

@@ -0,0 +1,15 @@
+const { merge } = require('webpack-merge');
+const prod = require('./webpack.prod.js');
+const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
+const smp = new SpeedMeasurePlugin();
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+module.exports = smp.wrap(merge(prod, {
+    plugins: [
+        new BundleAnalyzerPlugin({
+            analyzerMode: 'static',
+            openAnalyzer: true,
+            generateStatsFile: true
+        })
+    ]
+}));

server/resources/webpack.dev.js

@@ -0,0 +1,19 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+var webpack = require('webpack');
+
+module.exports = merge(common, {
+    mode: 'development',
+    devtool: false,
+    devServer: {
+        contentBase: './dist',
+    },
+    plugins: [
+        new webpack.EnvironmentPlugin({
+            GIT_VERSION: null,
+            GIT_AUTHOR_DATE: null,
+            BUNDLE_DATE: Date.now(),
+            BUNDLE_MODE: 'development'
+        })
+    ]
+});

server/resources/webpack.prod.js

@@ -0,0 +1,43 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const child_process = require('child_process');
+function git(command) {
+  return child_process.execSync(`git ${command}`, { encoding: 'utf8' }).trim();
+}
+var webpack = require('webpack');
+
+module.exports = merge(common, {
+    mode: 'production',
+    module: {
+        rules: [
+            {
+              test: /\.m?js$/,
+              exclude: /(node_modules|bower_components)/,
+              use: {
+                loader: 'babel-loader',
+                options: {
+                    presets: ['@babel/preset-env'],
+                    plugins: ['@babel/plugin-transform-runtime']
+                }
+              }
+            }
+        ]
+    },
+    plugins: [
+        new webpack.EnvironmentPlugin({
+            GIT_VERSION: git('describe --always'),
+            GIT_AUTHOR_DATE: git('log -1 --format=%aI'),
+            BUNDLE_DATE: Date.now(),
+            BUNDLE_MODE: 'production'
+        })
+    ],
+    optimization: {
+        mergeDuplicateChunks: true,
+        minimize: true,
+        minimizer: [new UglifyJsPlugin({
+          parallel: true,
+          extractComments: true
+        })]
+    }
+});

server/templates/base.html

@@ -8,7 +8,7 @@
   <meta name="google" content="notranslate">
   <meta name="robots" content="none">
   <link rel="manifest" href="manifest.webmanifest">
-  <script src="{{ urlsoftware }}/resources/dist/main.js"></script>
+  <script src="{{ urlsoftware }}/resources/dist/{{ resource('main.js') }}"></script>
   {% if enable_technical_support and technical_support_open %}
   <!-- Smartsupp Live Chat script -->
   <script type='text/javascript'>

server/templates/edit_service.html

@@ -2,7 +2,7 @@
 <html>
 <head>
   <link href="favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
-  <script src="resources/dist/main.js"></script>
+  <script src="{{ urlsoftware }}/resources/dist/{{ resource('main.js') }}"></script>
 </head>
 <body>
   {% if service.modalità == "edit" or service.modalità == "add" %}

server/templates/edit_training.html

@@ -2,7 +2,7 @@
 <html>
 <head>
   <link href="favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
-  <script src="resources/dist/main.js"></script>
+  <script src="{{ urlsoftware }}/resources/dist/{{ resource('main.js') }}"></script>
 </head>
 <body>
   {% if training.modalità == "edit" or training.modalità == "add" %}

server/templates/edit_user.html

@@ -2,7 +2,7 @@
 <html>
 <head>
   <link href="favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
-  <script src="resources/dist/main.js"></script>
+  <script src="{{ urlsoftware }}/resources/dist/{{ resource('main.js') }}"></script>
 </head>
 <body>
   {% if modalità == "edit" or modalità == "add" %}

server/templates/index.html

@@ -3,7 +3,7 @@
 {% block head %}
   {{ parent() }}
   {% if error %}
-    <script src="{{ urlsoftware }}/resources/dist/players.js"></script>
+    <script src="{{ urlsoftware }}/resources/dist/{{ resource('players.js') }}"></script>
   {% endif %}
 {% endblock %}
 

server/templates/services.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
-<script src="resources/dist/maps.js"></script>
+<script src="{{ urlsoftware }}/resources/dist/{{ resource('maps.js') }}"></script>
 <br>
 <img alt="VVF" src="./resources/images/owner.png" width="150"
   style="display: block; margin-left: auto; margin-right: auto;">

server/templates/trainings.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
-<script src="resources/dist/maps.js"></script>
+<script src="{{ urlsoftware }}/resources/dist/{{ resource('maps.js') }}"></script>
 <br>
 <img alt="VVF" src="./resources/images/owner.png" width="150"
   style="display: block; margin-left: auto; margin-right: auto;">

server/ui.php

@@ -3,6 +3,10 @@ require_once 'core.php';
 init_class();
 
 p_start("Load Twig");
+$webpack_manifest = json_decode(
+    file_get_contents(realpath("resources/dist/manifest.json")),
+    true
+);
 try {
     $loader = new \Twig\Loader\FilesystemLoader('templates');
 } catch (Exception $e) {
@@ -27,13 +31,20 @@ $function_option = new \Twig\TwigFunction(
     }
 );
 $twig->addFunction($function_option);
-$username_option = new \Twig\TwigFunction(
+$function_username = new \Twig\TwigFunction(
     'username', function ($id) {
         global $user;
         return $user->nameById($id);
     }
 );
-$twig->addFunction($username_option);
+$twig->addFunction($function_username);
+$function_resource = new \Twig\TwigFunction(
+    'resource', function ($file) {
+        global $webpack_manifest;
+        return $webpack_manifest[$file];
+    }
+);
+$twig->addFunction($function_resource);
 p_stop();
 
 $template = null;