better webpack output structure and more robust path checking for cache-control
This commit is contained in:
parent
920f480a57
commit
1752b4026f
11 changed files with 86 additions and 59 deletions
|
@ -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();
|
||||||
|
|
|
@ -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({
|
||||||
|
|
|
@ -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');
|
|
||||||
}
|
|
|
@ -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>
|
||||||
|
|
|
@ -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]',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in a new issue