updated frontend stack to latest versions (#729)

webpack.config.js

@@ -1,51 +1,59 @@
+// Hint: if something doesn't work as expected: yarn upgrade --latest
+
 var Encore = require('@symfony/webpack-encore');
 var webpack = require('webpack');
 
 Encore
-    // the project directory where compiled assets will be stored
     .setOutputPath('public/build/')
-
-    // the public path is ONLY used to reference fonts from within CSS
-    // you can ignore the warning message triggered by webpack encore
-    .setPublicPath('./')
-
-    // used by the asset twig helper to find the correct entry from manifest.json (prefix for each manifest entry)
+    .setPublicPath('build/')
     .setManifestKeyPrefix('build/')
-
-    // empty the outputPath directory before each build
     .cleanupOutputBeforeBuild()
 
-    // add debug data in development
-    .enableSourceMaps(!Encore.isProduction())
+    .addEntry('app', './assets/app.js')
+    .addEntry('chart', './assets/chart.js')
+    .addEntry('calendar', './assets/calendar.js')
+    .copyFiles({ from: './assets/images', to: 'images/[path][name].[ext]' })
 
-    // uncomment to create hashed filenames (e.g. app.abc123.css)
+    .splitEntryChunks()
+    .enableSingleRuntimeChunk()
+    .enableIntegrityHashes()
     .enableVersioning(Encore.isProduction())
 
-    // generate only two files: app.js and app.css
-    .addEntry('app', './assets/app.js')
-
-    // show OS notifications when builds finish/fail
+    .enableSourceMaps(!Encore.isProduction())
     .enableBuildNotifications()
 
-    // load jquery as Kimai and AdminLTE rely on it
+    .enableSassLoader()
     .autoProvidejQuery()
 
-    // enable sass/scss parser
-    // see https://symfony.com/doc/current/frontend/encore/bootstrap.html
-    .enableSassLoader(function(sassOptions) {}, {
-        resolveUrlLoader: false
-    })
-
-    // prevent that all moment locales will be included
+    // prevent that moment locales will be included which we don't need
     .addPlugin(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
 
-    // add hash after file name
-    .configureFilenames({
-        js: '[name].js?[chunkhash]',
-        css: '[name].css?[contenthash]',
-        images: 'images/[name].[ext]?[hash:8]',
-        fonts: 'fonts/[name].[ext]?[hash:8]'
+    .configureBabel(null, {
+        useBuiltIns: 'usage',
+        corejs: 3,
+    })
+
+    .configureOptimizeCssPlugin((options) => {
+        options.cssProcessorPluginOptions = {
+            preset: ['default', { discardComments: { removeAll: true } }],
+        }
+    })
+
+    .configureTerserPlugin((options) => {
+        options.cache = true;
+        options.terserOptions = {
+            output: {
+                comments: false
+            }
+        }
     })
 ;
 
-module.exports = Encore.getWebpackConfig();
+var config = Encore.getWebpackConfig();
+
+// this is a hack based on https://github.com/symfony/webpack-encore/issues/88
+// to rewrite the font url() in CSS to be relative.
+// if you encounter any problems ... please let me know!
+config.module.rules[3].options.publicPath = './';
+
+module.exports = config;