module.exports = { publicPath: "", css: { sourceMap: process.env.NODE_ENV !== "production", }, chainWebpack: (config) => { config.plugin("html").tap((args) => { const meta = { title: "Sebin Nyshkim - Reference Page", desc: "The official reference page for Sebin Nyshkim with picture references and in-depth character descriptions", type: "website", url: "https://ref.sebin-nyshkim.net", favicon: "favicon.png", preview: "preview.jpg", twitter: { card: "summary_large_image", creator: "@SebinNyshkim", }, themeColor: "#e74c3c", }; const links = { icon: { rel: "icon", href: meta.favicon, type: "image/png", }, favicon: { rel: "favicon", href: meta.favicon, type: "image/png", }, }; args[0].title = meta.title; args[0].links = links; args[0].meta = { "twitter:card": meta.twitter.card, "twitter:creator": meta.twitter.creator, "twitter:description": meta.desc, "twitter:text:title": meta.title, "twitter:image": `${meta.url}/${meta.preview}`, "og:title": meta.title, "og:type": meta.type, "og:url": meta.url, "og:image": `${meta.url}/${meta.preview}`, "og:description": meta.desc, "theme-color": meta.themeColor, }; return args; }); config.module .rule("images") .test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/i) .use("image-webpack-loader") .loader("image-webpack-loader") .tap((options) => { const newOpts = { mozjpeg: { progressive: true, quality: 75, }, pngquant: { quality: [0.65, 0.9], speed: 4, }, gifsicle: { interlaced: false, }, }; return { ...options, ...newOpts }; }); }, };