Watching PHP file changes with LiveReload not working

[farmerpaul]

Hi there,

On another user's suggestion, I tried installing this plugin in tandem with webpack-livereload-plugin, in my Laravel Mix's webpack configuration. However, the targeted PHP files still don't trigger a page reload, as I'd hoped. I still have to manually reload the browser to see those changes. Any thoughts?

LiveReload works perfectly fine for CSS and JS, just not the files I'm trying to watch using this plugin.

Here's my webpack.mix.js file:

const mix                     = require('laravel-mix');
const LiveReloadPlugin        = require('webpack-livereload-plugin');
const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');

require('@tinypixelco/laravel-mix-wp-blocks');

// Initialize Mix.
 mix
  .setPublicPath('./public')
  .webpackConfig({
    plugins: [
      new ExtraWatchWebpackPlugin({
        files: 'resources/views/**/*.php',
      }),
      new LiveReloadPlugin({
        useSourceHash   : true,
        appendScriptTag : true,
        port            : 4000,
      }),
    ],
  });

// Handle CSS.
mix
  .postCss('resources/styles/app.css', 'styles')
  .postCss('resources/styles/editor.css', 'styles')
  .options({
    processCssUrls: false,
    postCss: [
      require('postcss-import'),
      require('tailwindcss/nesting'),
      require('tailwindcss'),
      require('autoprefixer'),
    ],
  });

// Handle JS.
mix
  .js('resources/scripts/app.js', 'scripts')
  .js('resources/scripts/customizer.js', 'scripts')
  .blocks('resources/scripts/editor.js', 'scripts')
  .autoload({ jquery: ['$', 'window.jQuery'] })
  .extract();

// Copy assets.
mix
  .copyDirectory('resources/images', 'public/images')
  .copyDirectory('resources/fonts', 'public/fonts');

// Other settings.
mix
  .sourceMaps()
  .version();

[farmerpaul]

It started sort of working as soon as I tried removing useSourceHash: true, and added delay: 100 to the LiveReloadPlugin settings. I don't actually have a clue what's going on under the hood. It also turns out, using extra-watch-webpack-plugin isn't helping one way or the other, so maybe Laravel Mix is already set up to watch those PHP files. But, it's still only working sporadically.

I had earlier enabled useSourceHash to prevent the whole page from reloading when I only changed the CSS (which I found annoying), but doing that also disabled page reload on PHP file changes, for some unknown reason.

If I don't include delay: 100 (or delay: 500 or some positive integer), then it reloads more sporadically when the files change. Using a number like 100 ms at least improves it, but it's still super inconsistent.

I dunno, I'll live with this for now, but it's still pretty frustrating. Here's my revised, semi-working webpackConfig section for anyone interested:

mix
  .setPublicPath('./public')
  .webpackConfig({
    plugins: [
      new LiveReloadPlugin({
        appendScriptTag : true,
        port            : 4000,
        delay           : 100,
      }),
    ],
  });