How can I use PHP inside a wordpress site to find a hashed bundle.js file and insert the appropriate file name into the script tag?

Question

So, I've never written php until today, and I'm trying to implement a cache breaking system on a wordpress site that has some React components living inside it. So inside of the footer-home.php file I have this:

      </div> <?php // close #app ?>
    </main>
  <div class="container footer">

    <div class="row">
      <div class="col-sm-12">
        <div id="instagram"></div>
      </div>
    </div>

    <?php get_footer('shared') ?>
  </div>

  </div><?php //close container ?>

<?php
function grab_hashed_bundle_script() {
  $path = '/client/';
  $fileName = null;
  $dirJS = new DirectoryIterator($path);

  foreach ($dirJS as $file) {
    if (pathinfo($file, PATHINFO_EXTENSION) === 'js') {
      $fileName = basename($file);
      break;
    }
  }
  return $fileName;
}

$bundle_js = grab_hashed_bundle_script();
?>  
  <script src="/client/<?php echo $bundle_js ?>"></script>
  <?php wp_footer(); ?>
</body>
</html>

I know this is ugly AF and hacky, so if anyone can point out a better way to do this, I'm all ears.

The reason I need to do this is I'm having webpack add a random 6-digit hash to the bundle.js filename(as in bundle-123456.js ) every time we run a new build. Previously, we just had a regular script tag in this footer file like so: <script src=/client/bundle.js"></script> but clients' browsers would end up caching bundle.js even after we had updated it requiring customers to have to empty their cache in order to get the new .js files.

Any help is greatly appreciated.

Also, I'm not trying to cache bust with a param as suggested in the comment. I'm trying to bust based on the random hash that I'm having webpack insert into the name of the bundle.js file upon building.

Answer 1

This is the solution one of my co-workers came up with:

Inside of functions.php :

/**
 * Grab Hashed Bundle Files
 */

function enqueue_hashed_bundle_files() {
  // soooo gross. would love to know of a cleaner way.
  $build_dir = get_theme_root() . '/../../../client/build/';
  $all_files = scandir($build_dir);

  $css_files = array();
  $js_files = array();

  foreach( $all_files as $file ){
    $pathinfo = pathinfo($file);
    switch( $pathinfo['extension'] ){
      case 'js':
        array_push($js_files, $file);
        break;
      case 'css':
        array_push($css_files, $file);
        break;
      default:
        break;
    }
  }

  // now that we have the filenames, we can access them directly with the
  // absolute url

  $base_url = get_option('siteurl') . '/client/';

  wp_enqueue_script( 'bundlejs', $base_url . $js_files[0], array(), null, true );
  wp_enqueue_style( 'bundlecss', $base_url . $css_files[0], array(), null );
}

Answer 2

Change your request for the js file to have a query param instead of a random string in the filename.

See this post. The browser shouldn't cache it with a query string.