From afc7e3347812267b1aa91bda0e5652ba3eac9fea Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sun, 17 May 2020 21:02:57 -0500 Subject: [PATCH] Use HtmlWebpackPlugin to inject chunks with hashes Probably the worst code I've ever written in my life, I'm sorry --- app/gabsocial/containers/gabsocial.js | 8 ++++++-- app/index.ejs | 27 +++++++++++++++++++++++++++ package.json | 1 + static/index.html | 18 ------------------ webpack/shared.js | 23 ++++++++++++++++++----- yarn.lock | 7 +++++++ 6 files changed, 59 insertions(+), 25 deletions(-) create mode 100644 app/index.ejs delete mode 100644 static/index.html diff --git a/app/gabsocial/containers/gabsocial.js b/app/gabsocial/containers/gabsocial.js index 556f50bca..c36cdc636 100644 --- a/app/gabsocial/containers/gabsocial.js +++ b/app/gabsocial/containers/gabsocial.js @@ -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 { <> - + + + +
+ + diff --git a/package.json b/package.json index a4b5bbd34..1133c740d 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/static/index.html b/static/index.html deleted file mode 100644 index b75639074..000000000 --- a/static/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - Soapbox - - - - - - - - - -
- - diff --git a/webpack/shared.js b/webpack/shared.js index bc6091247..ef9c54d7d 100644 --- a/webpack/shared.js +++ b/webpack/shared.js @@ -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: { diff --git a/yarn.lock b/yarn.lock index 6125a2566..0edca5bcf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"