Use HtmlWebpackPlugin to inject chunks with hashes

Probably the worst code I've ever written in my life, I'm sorry
4 years ago · afc7e33478
parent c916122da7
commit afc7e33478
6 changed files with 59 additions and 25 deletions
--- 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 {
        <>
          <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>
--- a/app/index.ejs
+++ b/app/index.ejs
@ -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>
--- 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",
--- a/static/index.html
+++ b/static/index.html
@ -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>
--- 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: {
--- 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"