Use HtmlWebpackPlugin to inject chunks with hashes
Probably the worst code I've ever written in my life, I'm sorry
This commit is contained in:
Alex Gleason
parent
c916122da7
commit
afc7e33478
|
|
@ -65,6 +65,11 @@ class GabSocialMount extends React.PureComponent {
|
|||
locale: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
getThemeChunk = theme => {
|
||||
const cssChunks = JSON.parse(document.getElementById('css-chunks').innerHTML);
|
||||
return cssChunks.filter(chunk => chunk.startsWith(theme))[0];
|
||||
};
|
||||
|
||||
render() {
|
||||
const { me, theme, reduceMotion, systemFont, dyslexicFont, demetricator, locale } = this.props;
|
||||
if (me === null) return null;
|
||||
|
|
@ -92,8 +97,7 @@ class GabSocialMount extends React.PureComponent {
|
|||
<>
|
||||
<Helmet>
|
||||
<body className={bodyClass} />
|
||||
<script src={`/packs/js/locale_${locale}.chunk.js`} />
|
||||
{theme && <link rel='stylesheet' href={`/packs/css/${theme}.chunk.css`} />}
|
||||
{theme && <link rel='stylesheet' href={`/packs/css/${this.getThemeChunk(theme)}.chunk.css`} />}
|
||||
</Helmet>
|
||||
<BrowserRouter>
|
||||
<ScrollContext>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
|
||||
<title>Soapbox</title>
|
||||
<link rel="icon" type="image/png" href="/favicon.png">
|
||||
<%= htmlWebpackPlugin.tags.headTags.map(t => {
|
||||
if (t.attributes['href'].startsWith('/packs/css/azure')) t.attributes['data-react-helmet'] = "true";
|
||||
return t;
|
||||
}).join("\n ") %>
|
||||
<%= htmlWebpackPlugin.tags.bodyTags.join("\n ") %>
|
||||
<script id="css-chunks" type="application/json">[<%=
|
||||
compilation.getAssets()
|
||||
.filter(a => a.name.match(/^css\/(.*).css$/))
|
||||
.filter(a => !a.name.startsWith('css/common'))
|
||||
.filter(a => !a.name.startsWith('css/mailer'))
|
||||
.map(a => a.name.substr(4, a.name.length-14))
|
||||
.map(a => `"${a}"`)
|
||||
.join(',')
|
||||
%>]</script>
|
||||
</head>
|
||||
<body class="app-body">
|
||||
<noscript>To use Soapbox, please enable JavaScript.</noscript>
|
||||
<div class="app-holder" id="gabsocial"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -152,6 +152,7 @@
|
|||
"eslint-plugin-jsx-a11y": "~6.2.3",
|
||||
"eslint-plugin-promise": "~4.2.0",
|
||||
"eslint-plugin-react": "~7.17.0",
|
||||
"html-webpack-harddisk-plugin": "^1.0.1",
|
||||
"html-webpack-plugin": "^4.0.2",
|
||||
"jest": "^24.8.0",
|
||||
"raf": "^3.4.1",
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
|
||||
<title>Soapbox</title>
|
||||
<link rel="icon" type="image/png" href="/favicon.png">
|
||||
<link rel="stylesheet" href="/packs/css/common.css">
|
||||
<script src="/packs/js/common.js"></script>
|
||||
<script src="/packs/js/locale_en.chunk.js" data-react-helmet="true"></script>
|
||||
<script src="/packs/js/application.chunk.js"></script>
|
||||
<link rel="stylesheet" href="/packs/css/azure.chunk.css" data-react-helmet="true">
|
||||
</head>
|
||||
<body class="app-body">
|
||||
<noscript>To use Soapbox, please enable JavaScript.</noscript>
|
||||
<div class="app-holder" id="gabsocial"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -5,6 +5,8 @@ const { basename, dirname, join, relative, resolve } = require('path');
|
|||
const { sync } = require('glob');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const AssetsManifestPlugin = require('webpack-assets-manifest');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
|
||||
const extname = require('path-complete-extname');
|
||||
const { env, settings, themes, output } = require('./configuration');
|
||||
const rules = require('./rules');
|
||||
|
|
@ -34,9 +36,9 @@ module.exports = {
|
|||
),
|
||||
|
||||
output: {
|
||||
filename: 'js/[name].js',
|
||||
chunkFilename: 'js/[name].chunk.js',
|
||||
hotUpdateChunkFilename: 'js/[id].hot-update.js',
|
||||
filename: 'js/[name]-[chunkhash].js',
|
||||
chunkFilename: 'js/[name]-[chunkhash].chunk.js',
|
||||
hotUpdateChunkFilename: 'js/[id]-[hash].hot-update.js',
|
||||
path: output.path,
|
||||
publicPath: output.publicPath,
|
||||
},
|
||||
|
|
@ -75,8 +77,8 @@ module.exports = {
|
|||
}
|
||||
),
|
||||
new MiniCssExtractPlugin({
|
||||
filename: 'css/[name].css',
|
||||
chunkFilename: 'css/[name].chunk.css',
|
||||
filename: 'css/[name]-[contenthash:8].css',
|
||||
chunkFilename: 'css/[name]-[contenthash:8].chunk.css',
|
||||
}),
|
||||
new AssetsManifestPlugin({
|
||||
integrity: false,
|
||||
|
|
@ -84,6 +86,17 @@ module.exports = {
|
|||
writeToDisk: true,
|
||||
publicPath: true,
|
||||
}),
|
||||
// https://github.com/ampedandwired/html-webpack-plugin
|
||||
new HtmlWebpackPlugin({
|
||||
inject: false,
|
||||
template: 'app/index.ejs',
|
||||
chunksSortMode: 'manual',
|
||||
chunks: ['common', 'locale_en', 'application', 'azure'],
|
||||
alwaysWriteToDisk: true,
|
||||
}),
|
||||
new HtmlWebpackHarddiskPlugin({
|
||||
outputPath: join(__dirname, '..', 'static'),
|
||||
}),
|
||||
],
|
||||
|
||||
resolve: {
|
||||
|
|
|
|||
|
|
@ -4963,6 +4963,13 @@ html-minifier-terser@^5.0.1:
|
|||
relateurl "^0.2.7"
|
||||
terser "^4.6.3"
|
||||
|
||||
html-webpack-harddisk-plugin@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/html-webpack-harddisk-plugin/-/html-webpack-harddisk-plugin-1.0.1.tgz#4fc034d3440ec2a223dbe8fa1a5a2eb905e86fa5"
|
||||
integrity sha512-GWfutTqfxOe53qEKocqAFrrLVP/EJbmJZDAS5jBBmALkfyc2aakoQkSgo3fitYJORWcN0Fi8ekuySxfffhhRYw==
|
||||
dependencies:
|
||||
mkdirp "^0.5.1"
|
||||
|
||||
html-webpack-plugin@^4.0.2:
|
||||
version "4.0.2"
|
||||
resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.2.tgz#c96a48d0ee53d33dcc909d6b65ad28f3d627efd4"
|
||||
|
|
|
|||
Loading…
Reference in New Issue