deps: update dependency webpack to v5

.github/workflows/build.yml

@@ -11,6 +11,14 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v2
+        with:
+          persist-credentials: false
+
+      - name: Reconfigure git to use HTTP authentication
+        run: >
+          git config --global url."https://github.com/".insteadOf
+          ssh://git@github.com/
+
       - name: Setup Node
         uses: actions/setup-node@v2.2.0
         with:

.github/workflows/deploy.yml

@@ -15,6 +15,11 @@ jobs:
         with:
           persist-credentials: false
 
+      - name: Reconfigure git to use HTTP authentication
+        run: >
+          git config --global url."https://github.com/".insteadOf
+          ssh://git@github.com/
+
       - name: Setup Node
         uses: actions/setup-node@v2.2.0
         with:

app/Main.ts

@@ -3,35 +3,13 @@ import { PLATFORM } from "aurelia-pal";
 
 import "../content/main.scss";
 
-Promise.config({
-    longStackTraces: false,
-    warnings: false
-});
-
-(<any>window).Promise = Promise;
-
 export function configure(aurelia: Aurelia) {
     aurelia.use
         .standardConfiguration();
 
     if (window.location.href.indexOf("ckotzbauer.github.io") === -1) {
         aurelia.use
             .developmentLogging();
-    } else {
-        aurelia.use.plugin(PLATFORM.moduleName('aurelia-google-analytics'), config => {
-            config.init('UA-74794817-1');
-            config.attach({
-                logging: {
-                    enabled: true
-                },
-                pageTracking: {
-                    enabled: true
-                },
-                clickTracking: {
-                    enabled: true
-                }
-            });
-        });
     }
 
     LogManager.setLevel(3);

app/components/SiteHeader.html

@@ -1,6 +1,6 @@
 <template>
     <div class="entry-header">
-        <div if.bind="imageUrl" class="entry-image" css.bind="headerStyle"></div>
+        <div class="entry-image"></div>
         <div class="header-title">
             <div class="header-title-wrap">
                 <h1>${pageTitle}</h1>

app/components/SiteHeader.ts

@@ -2,18 +2,9 @@ import { bindable, computedFrom } from "aurelia-framework";
 
 export class SiteHeader {
 
-    @bindable
-    private imageUrl: string;
     @bindable
     private pageTitle: string;
 
-    @computedFrom("imageUrl")
-    private get headerStyle(): any {
-        return {
-            'background-image': `url(${this.imageUrl})`
-        };
-    };
-
     public attached() {
         $(document).ready(() => {
             var $window = $(window);

app/views/home/Home.html

@@ -2,14 +2,13 @@
     <require from='../../components/SiteHeader'></require>
 
     <site-header
-            page-title.bind="title"
-            image-url.bind="imageUrl">
+            page-title.bind="title">
     </site-header>
 
     <div id="home-page">
         <div id="main" role="main">
             <div class="picture-container">
-                <img src="content/images/avatar.jpg" alt="Christian Kotzbauer" class="author-photo">
+                <img src="../../../content/images/avatar.jpg" alt="Christian Kotzbauer" class="author-photo">
             </div>
             <div class="info-container">
                 <div class="space"></div>
@@ -42,7 +41,7 @@ <h1>Christian Kotzbauer</h1>
                     </div>
                 </div>
                 <div class="badge-section">
-                    <img src="content/images/cka.png" alt="CKA" class="cka-badge">
+                    <img src="../../../content/images/cka.png" alt="CKA" class="cka-badge">
                 </div>
             </div>
 

app/views/home/Home.ts

@@ -2,5 +2,4 @@
 export class Home {
 
     private title: string = "Development Experiences";
-    private imageUrl: string = "content/images/header.jpg";
 }

build/scripts/params.js

@@ -7,11 +7,7 @@ if (fs.existsSync("./build/scripts/buildParam.json")) {
 
 var profile = (props.profile || "local").trim();
 var prod = profile === "prod" || false;
-var bustValue = prod ? require("randomstring").generate(5) : "";
 
 module.exports = {
-    profile: profile,
-    prod: prod,
-    bust: prod ? `?bust=${bustValue}` : "",
-    bustValue: bustValue
+    prod: prod
 };

build/webpack/webpack.config.js

@@ -7,12 +7,11 @@ const path = require("path");
 
 const webpack = require("webpack");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const TerserPlugin = require("terser-webpack-plugin");
 const { AureliaPlugin } = require('aurelia-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const Visualizer = require("webpack-visualizer-plugin");
-const Uglify = require('uglifyjs-webpack-plugin');
 
 const params = require("../scripts/params");
 const isProduction = params.prod;
@@ -24,8 +23,7 @@ const isProduction = params.prod;
 const plugins = [];
 
 plugins.push(new CopyWebpackPlugin({ patterns: [
-    { from: 'content/fonts', to: '../content/fonts[path]/[name].[ext]' },
-    { from: 'content/images', to: '../content/images[path]/[name].[ext]' },
+    { from: 'content/images/favicon.ico', to: '../content/images[path]/[name][ext]' },
     { from: 'content/common/robots.txt', to: '..' },
     { from: 'build/CNAME', to: '..' }
 ]}));
@@ -44,7 +42,7 @@ plugins.push(new AureliaPlugin({
     }
 }));
 
-plugins.push(new MiniCssExtractPlugin({ filename: `style.css${params.bust}` }));
+plugins.push(new MiniCssExtractPlugin({ filename: `style.[contenthash].css` }));
 
 plugins.push(new HtmlWebpackPlugin({
     template: './index.ejs',
@@ -53,49 +51,23 @@ plugins.push(new HtmlWebpackPlugin({
 }));
 
 plugins.push(new webpack.ProvidePlugin({
-    Promise: "bluebird",
     $: "jquery",
     jQuery: "jquery",
     "window.jQuery": "jquery"
 }));
 
-if (isProduction) {
-    plugins.push(new Uglify({ sourceMap: true, test: /\.js$/i, parallel: true }));
-    plugins.push(new OptimizeCSSAssetsPlugin({}));
-} else {
-    plugins.push(new webpack.SourceMapDevToolPlugin({
-        filename: "[name].map"
-    }));
-}
-
-plugins.push(new Visualizer({
-    filename: "../../artifacts/stats.html"
-}));
-
-const p = {};
-p.apply = (compiler) => {
-    compiler.plugin('done', () => {
-        setTimeout(() => console.log("\n\nBuild time: " + new Date().toLocaleString()), 1000);
-    });
-};
-
-plugins.push(p);
-
-
 
 // #####################################
 //         LOADER CONFIGURATIONS
 // #####################################
-const cacheBustLoader = `cache-bust-loader?name=bust&value=${params.bustValue}&types=eot;woff;woff2;svg;ttf;otf;jpg;jpeg;png;ico;gif`;
-
 const loaders = [
-    { test: /\.css$/, loader: [MiniCssExtractPlugin.loader, "css-loader?url=false"] },
-    { test: /\.scss/, loader: [MiniCssExtractPlugin.loader, "css-loader?url=false", { loader: "sass-loader", options: { sassOptions: { includePaths: ["node_modules"] } } }] },
-    { test: /\.html$/, loader: `${cacheBustLoader}!html-loader?attributes=false` },
-    { test: /\.ts$/, loader: `${cacheBustLoader}!awesome-typescript-loader`, exclude: [path.resolve("node_modules")] },
-    { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff2' },
-    { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&minetype=application/font-woff' },
-    { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' }
+    { test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"] },
+    { test: /\.scss/, use: [MiniCssExtractPlugin.loader, "css-loader", { loader: "sass-loader", options: { sassOptions: { includePaths: ["node_modules"] } } }] },
+    { test: /\.html$/, use: [{ loader: "html-loader", options: { esModule: false } }] },
+    { test: /\.ts$/, loader: `ts-loader`, exclude: [path.resolve("node_modules")] },
+    { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, type: 'asset/inline' },
+    { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/, type: 'asset/inline' },
+    { test: /\.(ttf|eot|svg|jpg|png)(\?v=[0-9]\.[0-9]\.[0-9])?$/, type: 'asset/resource' }
 ];
 
 
@@ -104,14 +76,13 @@ const loaders = [
 //         MAIN CONFIGURATION
 // #####################################
 module.exports = {
+    target: "web",
     entry: {
         main: "aurelia-bootstrapper"
     },
     output: {
         path: path.resolve('./build/out/assets'),
-        filename: `[name].js${params.bust}`,
-        sourceMapFilename: `[name].map${params.bust}`,
-        publicPath: "assets/"
+        filename: `[name][contenthash].js`,
     },
     plugins: plugins,
     resolve: {
@@ -121,7 +92,13 @@ module.exports = {
     module: {
         rules: loaders
     },
-    devtool: isProduction ? "#source-map" : undefined,
+    optimization: {
+        minimize: true,
+        minimizer: [
+            new TerserPlugin(),
+            new CssMinimizerPlugin(),
+        ],
+    },
+    devtool: "source-map",
     mode: isProduction ? "production" : "development",
-    watch: !isProduction
 };

content/sass/_page.scss

@@ -103,6 +103,7 @@ body {
 }
 .entry-image {
 	position: relative;
+	background-image: url("./images/header.jpg");
 	top: -50%; 
 	left: -50%; 
 	width: 200%;