better webpack output structure and more robust path checking for cache-control

This commit is contained in:
Sean Yesmunt 2019-12-11 16:46:00 -05:00
parent 920f480a57
commit 1752b4026f
11 changed files with 86 additions and 59 deletions

View file

@ -1,12 +1,30 @@
const THREE_MONTHS_IN_SECONDS = 7776000; const SIX_MONTHS_IN_SECONDS = 15552000;
const STATIC_ASSET_PATHS = [
'/public/font/font-v1.css',
'/public/font/v1/300.woff',
'/public/font/v1/300i.woff',
'/public/font/v1/400.woff',
'/public/font/v1/400i.woff',
'/public/font/v1/700.woff',
'/public/font/v1/700i.woff',
'/public/favicon.png',
'/public/img/busy.gif',
'/public/img/gerbil-happy.png',
'/public/img/gerbil-sad.png',
'/public/img/placeholder.png',
'/public/img/thumbnail-broken.png',
'/public/img/thumbnail-missing.png',
'/public/img/total-background.png',
];
async function redirectMiddleware(ctx, next) { async function redirectMiddleware(ctx, next) {
const { const {
request: { url }, request: { url },
} = ctx; } = ctx;
if (url.includes('.png') || url.includes('font.css') || url.includes('.woff')) { if (STATIC_ASSET_PATHS.includes(url)) {
ctx.set('Cache-Control', `public, max-age=${THREE_MONTHS_IN_SECONDS}`); ctx.set('Cache-Control', `public, max-age=${SIX_MONTHS_IN_SECONDS}`);
} }
return next(); return next();

View file

@ -17,8 +17,8 @@ const webConfig = {
}, },
output: { output: {
filename: '[name].js', filename: '[name].js',
path: __dirname + '/dist/', path: __dirname + '/dist/public/',
publicPath: '/', publicPath: '/public/',
}, },
devServer: { devServer: {
port: WEBPACK_WEB_PORT, port: WEBPACK_WEB_PORT,
@ -62,15 +62,15 @@ const webConfig = {
}, },
{ {
from: `${STATIC_ROOT}/img/favicon.png`, from: `${STATIC_ROOT}/img/favicon.png`,
to: `${DIST_ROOT}/favicon.png`, to: `${DIST_ROOT}/public/favicon.png`,
}, },
{ {
from: `${STATIC_ROOT}/img/og.png`, from: `${STATIC_ROOT}/img/og.png`,
to: `${DIST_ROOT}/og.png`, to: `${DIST_ROOT}/public/og.png`,
}, },
{ {
from: `${STATIC_ROOT}/font/`, from: `${STATIC_ROOT}/font/`,
to: `${DIST_ROOT}/font/`, to: `${DIST_ROOT}/public/font/`,
}, },
]), ]),
new DefinePlugin({ new DefinePlugin({

View file

@ -1,47 +0,0 @@
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('/font/inter/300.woff') format('woff');
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url('/font/inter/300i.woff') format('woff');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/font/inter/400.woff') format('woff');
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/font/inter/400i.woff') format('woff');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/font/inter/700.woff') format('woff');
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url('/font/inter/700i.woff') format('woff');
}

View file

@ -2,9 +2,65 @@
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<script src="/ui.js" async></script> <script src="/public/ui.js" async></script>
<link rel="icon" type="image/png" href="favicon.png" /> <link rel="icon" type="image/png" href="/public/favicon.png" />
<link rel="stylesheet" href="/font/font.css" />
<link rel="preload" href="public/font/v1/300.woff" as="font" type="font/woff" />
<link rel="preload" href="public/font/v1/300i.woff" as="font" type="font/woff" />
<link rel="preload" href="public/font/v1/400.woff" as="font" type="font/woff" />
<link rel="preload" href="public/font/v1/400i.woff" as="font" type="font/woff" />
<link rel="preload" href="public/font/v1/700.woff" as="font" type="font/woff" />
<link rel="preload" href="public/font/v1/700i.woff" as="font" type="font/woff" />
<style>
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('/public/font/v1/300.woff') format('woff');
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url('/public/font/v1/300i.woff') format('woff');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/public/font/v1/400.woff') format('woff');
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/public/font/v1/400i.woff') format('woff');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('/public/font/v1/700.woff') format('woff');
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url('/public/font/v1/700i.woff') format('woff');
}
</style>
<!-- VARIABLE_HEAD_BEGIN --> <!-- VARIABLE_HEAD_BEGIN -->
<title>lbry.tv</title> <title>lbry.tv</title>

View file

@ -47,7 +47,7 @@ let baseConfig = {
use: { use: {
loader: 'file-loader', loader: 'file-loader',
options: { options: {
outputPath: 'static/img', outputPath: 'img/',
name: '[name].[ext]', name: '[name].[ext]',
}, },
}, },