Use HtmlWebpackPlugin cache busting

Author: devloco

packages/react-scripts/config/webpack.config.wptheme.js

@@ -210,15 +210,11 @@ module.exports = function(webpackEnv) {
       pathinfo: isEnvDevelopment,
       // There will be one main bundle, and one file per asynchronous chunk.
       // In development, it does not produce real files.
-      filename: isEnvProduction
-        ? 'static/js/[name].[contenthash:8].js'
-        : isEnvDevelopment && 'static/js/[name].[contenthash:8].js', // wptheme modified... always use cache busting
+      filename: 'static/js/bundle.js', // wptheme modified... always use cache busting via the HtmlWebpackPlugin config, way below here
       // TODO: remove this when upgrading to webpack 5
       futureEmitAssets: true,
       // There are also additional JS chunk files if you use code splitting.
-      chunkFilename: isEnvProduction
-        ? 'static/js/[name].[contenthash:8].chunk.js'
-        : isEnvDevelopment && 'static/js/[name].[contenthash:8].chunk.js', // wptheme modified... always use cache busting
+      chunkFilename: 'static/js/[name].chunk.js', // wptheme modified... always use cache busting via the HtmlWebpackPlugin config, way below here
       // We inferred the "public path" (such as / or /my-project) from homepage.
       // We use "/" in development.
       publicPath: publicPath,
@@ -596,14 +592,14 @@ module.exports = function(webpackEnv) {
     },
     plugins: [
       // Generates an `index.html` file with the <script> injected.
-      // wptheme -- added php support
       new HtmlWebpackPlugin(
         Object.assign(
           {},
           {
-            filename: 'index.php',
+            filename: 'index.php', // wptheme -- added php support
             inject: true,
             template: paths.appHtml,
+            hash: true, // wptheme modified... always use cache busting
           },
           isEnvProduction
             ? {
@@ -665,8 +661,8 @@ module.exports = function(webpackEnv) {
       new MiniCssExtractPlugin({
         // Options similar to the same options in webpackOptions.output
         // both options are optional
-        filename: 'static/css/[name].[contenthash:8].css',
-        chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+        filename: 'static/css/[name].css',
+        chunkFilename: 'static/css/[name].chunk.css',
       }),
       // Generate a manifest file which contains a mapping of all asset filenames
       // to their corresponding output file so that tools can pick it up without

packages/react-scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devloco/react-scripts-wptheme",
-  "version": "3.1.1-wptheme-3.1.2",
+  "version": "3.1.1-wptheme-3.1.3",
   "description": "Configuration and scripts for Create React WP Theme.",
   "repository": "devloco/create-react-wptheme",
   "author": "devloco",