Add cache-busting content hash to JS filename

The scratch directory webpack config now dynamically injects a script
tag and includes a content hash in the scratch.js filename, e.g.
scratch.dc000fc4af51426aea0c.js. We're hoping that this will bust the
Cloudflare cache whenever the source, `scratch/src/index.jsx`, changes.

Author: floehopper

scratch/package.json

@@ -19,6 +19,7 @@
     "@babel/preset-react": "7.14.5",
     "@webpack-cli/generators": "^3.0.7",
     "babel-loader": "8.2.2",
+    "html-webpack-plugin": "^5.6.3",
     "webpack": "^5.97.1",
     "webpack-cli": "^6.0.1"
   },

scratch/webpack.config.js

@@ -1,20 +1,25 @@
 // Generated using webpack-cli https://github.com/webpack/webpack-cli
 
 const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 const isProduction = process.env.NODE_ENV == "production";
 
 const config = {
   entry: "./src/index.jsx",
   output: {
+    filename: 'scratch.[contenthash].js',
     path: path.resolve(__dirname, "dist"),
   },
   optimization: {
     minimize: false
   },
   plugins: [
-    // Add your plugins here
-    // Learn more about plugins from https://webpack.js.org/configuration/plugins/
+    new HtmlWebpackPlugin({
+      inject: "head",
+      template: "index.html",
+      filename: "scratch-component.html",
+    }),
   ],
   module: {
     rules: [