Webpack 5 Favicons generation

app/client/dist/icons/browserconfig.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="/icons/mstile-70x70.png"/>
+            <square150x150logo src="/icons/mstile-150x150.png"/>
+            <wide310x150logo src="/icons/mstile-310x150.png"/>
+            <square310x310logo src="/icons/mstile-310x310.png"/>
+            <TileColor>#fff</TileColor>
+
+        </tile>
+
+    </msapplication>
+
+</browserconfig>

app/client/dist/icons/manifest.json

@@ -0,0 +1,59 @@
+{
+  "name": "ss-webpack-boilerplate",
+  "short_name": "ss-webpack-boilerplate",
+  "description": "Lets you create SilverStripe faster",
+  "dir": "auto",
+  "lang": "en-US",
+  "display": "standalone",
+  "orientation": "any",
+  "start_url": "/?homescreen=1",
+  "background_color": "#fff",
+  "theme_color": "#fff",
+  "icons": [
+    {
+      "src": "/icons/android-chrome-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/android-chrome-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/android-chrome-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/android-chrome-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/android-chrome-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/android-chrome-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/android-chrome-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

app/client/dist/icons/manifest.webapp

@@ -0,0 +1,14 @@
+{
+  "version": "2.0.2",
+  "name": "ss-webpack-boilerplate",
+  "description": "Lets you create SilverStripe faster",
+  "icons": {
+    "60": "/icons/firefox_app_60x60.png",
+    "128": "/icons/firefox_app_128x128.png",
+    "512": "/icons/firefox_app_512x512.png"
+  },
+  "developer": {
+    "name": "Tony Air",
+    "url": null
+  }
+}

app/client/dist/icons/yandex-browser-manifest.json

@@ -0,0 +1,9 @@
+{
+  "version": "2.0.2",
+  "api_version": 1,
+  "layout": {
+    "logo": "/icons/yandex-browser-50x50.png",
+    "color": "#fff",
+    "show_title": true
+  }
+}

app/client/dist/records.json

@@ -31,6 +31,29 @@
       831
     ]
   },
+  "favicons-webpack-plugin": [
+    {
+      "chunks": {
+        "byName": {
+          "favicon.png": 561
+        },
+        "bySource": {
+          "0 favicon.png": 561
+        },
+        "usedIds": [
+          561
+        ]
+      },
+      "modules": {
+        "byIdentifier": {
+          "./node_modules/.pnpm/cache-loader@4.1.0_webpack@5.11.0/node_modules/cache-loader/dist/cjs.js?{\"cacheDirectory\":\"/mnt/data/srv/dist/repositories/silverstripe-webpack/node_modules/.cache/favicons-webpack-plugin\"}!./node_modules/.pnpm/github.com/jantimon/favicons-webpack-plugin@ee2818afa97c4b4bf1c6f919a403e56203e26606_webpack@5.11.0/node_modules/favicons-webpack-plugin/src/loader.js?{\"prefix\":\"/icons/\",\"options\":{\"appName\":\"ss-webpack-boilerplate\",\"appDescription\":\"Lets you create SilverStripe faster\",\"version\":\"2.0.2\",\"developerName\":\"Tony Air\"},\"path\":\"app/client/dist\"}!./app/client/src/favicon.png": 407
+        },
+        "usedIds": [
+          407
+        ]
+      }
+    }
+  ],
   "mini-css-extract-plugin /mnt/data/srv/dist/repositories/silverstripe-webpack/node_modules/.pnpm/css-loader@5.0.1_webpack@5.11.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.0_node-sass@5.0.0+webpack@5.11.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./app/client/src/scss/_cms.scss": [
     {
       "chunks": {

composer.json

@@ -11,6 +11,7 @@
         "php": ">=7.1.0",
         "ext-json": "*",
         "silverstripe/recipe-cms": "^4",
+        "silverstripe/recipe-plugin": "^1.5",
         "wilr/silverstripe-googlesitemaps": "*",
         "silverstripe/userforms": "*",
         "undefinedoffset/sortablegridfield": "*",

package.json

@@ -31,8 +31,8 @@
 		"ie>=11"
 	],
 	"dependencies": {
-		"@a2nt/meta-lightbox": "^2.7.1",
+		"@a2nt/meta-lightbox": "^2.4.0",
-		"@a2nt/ss-bootstrap-ui-webpack-boilerplate": "^2.7.0",
+		"@a2nt/ss-bootstrap-ui-webpack-boilerplate": "^2.6.3",
 		"aos": "^2.3.4",
 		"bootbox": "^5.5.2",
 		"bootstrap": "^4.5.3",
@@ -89,7 +89,7 @@
 		"exports-loader": "^1.1.1",
 		"fast-levenshtein": "^3.0.0",
 		"fastest-levenshtein": "^1.0.12",
-		"favicons-webpack-plugin": "^4.2.0",
+		"favicons-webpack-plugin": "github:jantimon/favicons-webpack-plugin#benkostr-webpack-5",
 		"file-loader": "^6.2.0",
 		"font-awesome": "^4.7.0",
 		"hoist-non-react-statics": "^3.3.2",
@@ -126,7 +126,7 @@
 		"terser-webpack-plugin": "^5.0.3",
 		"url-loader": "^4.1.1",
 		"webpack": "^5.11.0",
-		"webpack-cli": "^4.3.0",
+		"webpack-cli": "^4.2.0",
 		"webpack-dev-server": "^4.0.0-beta.0",
 		"webpack-manifest-plugin": "^3.0.0",
 		"webpack-merge": "^5.7.3"

webpack.config.js

@@ -12,7 +12,7 @@ const common = require('./webpack.config.common.js');
 const filesystem = require('fs');
 const path = require('path');
 
-//const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
+const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
 
 const TerserPlugin = require('terser-webpack-plugin');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
@@ -119,72 +119,72 @@ let plugins = [
 	}),
 ];
 
-/*const faviconPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png');
+const faviconPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png');
 if (filesystem.existsSync(faviconPath)) {
-  plugins.push(
+	plugins.push(
-    new FaviconsWebpackPlugin({
+		new FaviconsWebpackPlugin({
-      title: 'Webpack App',
+			title: 'Webpack App',
-      logo: faviconPath,
+			logo: faviconPath,
-      prefix: '/icons/',
+			prefix: '/icons/',
-      emitStats: false,
+			emitStats: false,
-      persistentCache: true,
+			persistentCache: true,
-      inject: false,
+			inject: false,
-      statsFilename: path.join(
+			statsFilename: path.join(
-        conf.APPDIR,
+				conf.APPDIR,
-        conf.DIST,
+				conf.DIST,
-        'icons',
+				'icons',
-        'iconstats.json',
+				'iconstats.json',
-      ),
+			),
-      icons: {
+			icons: {
-        android: true,
+				android: true,
-        appleIcon: true,
+				appleIcon: true,
-        appleStartup: true,
+				appleStartup: true,
-        coast: true,
+				coast: true,
-        favicons: true,
+				favicons: true,
-        firefox: true,
+				firefox: true,
-        opengraph: true,
+				opengraph: true,
-        twitter: true,
+				twitter: true,
-        yandex: true,
+				yandex: true,
-        windows: true,
+				windows: true,
-      },
+			},
-    }),
+		}),
-  );
+	);
 }
 
 // add themes favicons
 commonVariables.themes.forEach((theme) => {
-  const faviconPath = path.join(__dirname, theme, conf.SRC, 'favicon.png');
+	const faviconPath = path.join(__dirname, theme, conf.SRC, 'favicon.png');
-  if (filesystem.existsSync(faviconPath)) {
+	if (filesystem.existsSync(faviconPath)) {
-    plugins.push(
+		plugins.push(
-      new FaviconsWebpackPlugin({
+			new FaviconsWebpackPlugin({
-        title: 'Webpack App',
+				title: 'Webpack App',
-        logo: faviconPath,
+				logo: faviconPath,
-        prefix: '/' + theme + '-icons/',
+				prefix: '/' + theme + '-icons/',
-        emitStats: false,
+				emitStats: false,
-        persistentCache: true,
+				persistentCache: true,
-        inject: false,
+				inject: false,
-        statsFilename: path.join(
+				statsFilename: path.join(
-          conf.APPDIR,
+					conf.APPDIR,
-          conf.DIST,
+					conf.DIST,
-          theme + '-icons',
+					theme + '-icons',
-          'iconstats.json',
+					'iconstats.json',
-        ),
+				),
-        icons: {
+				icons: {
-          android: true,
+					android: true,
-          appleIcon: true,
+					appleIcon: true,
-          appleStartup: true,
+					appleStartup: true,
-          coast: true,
+					coast: true,
-          favicons: true,
+					favicons: true,
-          firefox: true,
+					firefox: true,
-          opengraph: true,
+					opengraph: true,
-          twitter: true,
+					twitter: true,
-          yandex: true,
+					yandex: true,
-          windows: true,
+					windows: true,
-        },
+				},
-      }),
+			}),
-    );
+		);
-  }
+	}
-});*/
+});
 
 const cfg = merge(common, {
 	mode: 'production',