Webpack 5 Favicons generation

This commit is contained in:
Tony Air 2020-12-28 07:32:09 +07:00
parent d559313215
commit 1a20c9f1dd
66 changed files with 187 additions and 66 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 696 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 891 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 991 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 126 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 174 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 126 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 174 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

15
app/client/dist/icons/browserconfig.xml vendored Normal file
View File

@ -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>

BIN
app/client/dist/icons/coast-228x228.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
app/client/dist/icons/favicon-16x16.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 338 B

BIN
app/client/dist/icons/favicon-32x32.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 669 B

BIN
app/client/dist/icons/favicon-48x48.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 891 B

BIN
app/client/dist/icons/favicon.ico vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

59
app/client/dist/icons/manifest.json vendored Normal file
View File

@ -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"
}
]
}

14
app/client/dist/icons/manifest.webapp vendored Normal file
View File

@ -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
}
}

BIN
app/client/dist/icons/mstile-144x144.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
app/client/dist/icons/mstile-150x150.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
app/client/dist/icons/mstile-310x150.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
app/client/dist/icons/mstile-310x310.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
app/client/dist/icons/mstile-70x70.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 941 B

View File

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

View File

@ -31,6 +31,29 @@
831 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": [ "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": { "chunks": {

View File

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

View File

@ -31,8 +31,8 @@
"ie>=11" "ie>=11"
], ],
"dependencies": { "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", "aos": "^2.3.4",
"bootbox": "^5.5.2", "bootbox": "^5.5.2",
"bootstrap": "^4.5.3", "bootstrap": "^4.5.3",
@ -89,7 +89,7 @@
"exports-loader": "^1.1.1", "exports-loader": "^1.1.1",
"fast-levenshtein": "^3.0.0", "fast-levenshtein": "^3.0.0",
"fastest-levenshtein": "^1.0.12", "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", "file-loader": "^6.2.0",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"hoist-non-react-statics": "^3.3.2", "hoist-non-react-statics": "^3.3.2",
@ -126,7 +126,7 @@
"terser-webpack-plugin": "^5.0.3", "terser-webpack-plugin": "^5.0.3",
"url-loader": "^4.1.1", "url-loader": "^4.1.1",
"webpack": "^5.11.0", "webpack": "^5.11.0",
"webpack-cli": "^4.3.0", "webpack-cli": "^4.2.0",
"webpack-dev-server": "^4.0.0-beta.0", "webpack-dev-server": "^4.0.0-beta.0",
"webpack-manifest-plugin": "^3.0.0", "webpack-manifest-plugin": "^3.0.0",
"webpack-merge": "^5.7.3" "webpack-merge": "^5.7.3"

View File

@ -12,7 +12,7 @@ const common = require('./webpack.config.common.js');
const filesystem = require('fs'); const filesystem = require('fs');
const path = require('path'); const path = require('path');
//const FaviconsWebpackPlugin = require('favicons-webpack-plugin'); const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-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)) { 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 // add themes favicons
commonVariables.themes.forEach((theme) => { 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, { const cfg = merge(common, {
mode: 'production', mode: 'production',