"Manually" generate favicon instead of using webpack plugin

This commit is contained in:
Martin Kleinschrodt 2021-12-05 09:26:15 +01:00
parent 6a74bc0080
commit 3bcaa7d7aa
4 changed files with 22409 additions and 21629 deletions

File diff suppressed because it is too large Load Diff

View File

@ -24,6 +24,8 @@
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.1",
"http-server": "^0.12.3",
"raw-loader": "^4.0.2",
"sharp": "^0.29.3",
"style-loader": "^2.0.0",
"ts-loader": "^9.2.2",
"ts-node": "^10.0.0",
@ -33,8 +35,7 @@
"webpack-dev-server": "^4.2.1",
"webpack-pwa-manifest": "^4.3.0",
"workbox-cli": "^6.2.4",
"workbox-webpack-plugin": "^6.1.5",
"raw-loader": "^4.0.2"
"workbox-webpack-plugin": "^6.1.5"
},
"description": "Padloc Progressive Web App",
"scripts": {
@ -43,4 +44,4 @@
"start": "http-server ${PL_PWA_DIR:-dist} -s -p ${PL_PWA_PORT:-8080} --proxy ${PL_PWA_URL:-http://0.0.0.0:${PL_PWA_PORT:-8080}}?",
"build_and_start": "npm run build && npm start"
}
}
}

View File

@ -8,7 +8,8 @@
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" href="/assets/favicon.png" />
<link rel="shortcut icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" href="/favicon.png" />
<style>
html,

View File

@ -6,6 +6,7 @@ const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const WebpackPwaManifest = require("webpack-pwa-manifest");
// const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
const { version } = require("../../package.json");
const sharp = require("sharp");
const out = process.env.PL_PWA_DIR || resolve(__dirname, "dist");
const serverUrl = process.env.PL_SERVER_URL || `http://0.0.0.0:${process.env.PL_SERVER_PORT || 3000}`;
@ -91,6 +92,25 @@ module.exports = {
swDest: "sw.js",
exclude: [/favicon\.png$/, /\.map$/],
}),
{
apply(compiler) {
compiler.hooks.emit.tapPromise("Generate Favicon", async (compilation) => {
const icon = await sharp(resolve(__dirname, assetsDir, "app-icon.png"))
.resize({
width: 256,
height: 256,
})
.toBuffer();
compilation.assets["favicon.png"] = {
source: () => icon,
size: () => Buffer.byteLength(icon),
};
return true;
});
},
},
],
devServer: {
historyApiFallback: true,