Add files to watch

[DJ-Icebear]

How do I add more files to watch by this plugin? For example HTML files or files not touched by my webpack build?

[vs0uz4]

I'm having the same question, because I work with "Laravel" and would like it to update browsers when I needed the .php files as well.

[henrypenny]

This works for me: https://github.com/pigcan/extra-watch-webpack-plugin Add the plugin before webpack-livereload-plugin though.

[statianzo]

Thanks for the suggestion @henrypenny. Seems like a useful solution.

[farmerpaul]

@henrypenny: I tried the extra-watch-webpack-plugin as you suggested, placing it before webpack-livereload-plugin, in my Laravel Mix's webpack config settings, but changing the targeted PHP files still doesn't trigger a page reload. I still have to manually reload the browser to see those changes. Any ideas?

LiveReload works perfectly for CSS and JS, just not for PHP files.

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,
      }),
    ],
  });

[johnhooks]

This worked for me, I had to dig through the levels of abstraction the webpack-livereload-plugin adds to livereload-js. The option that need to be added to watch php files is, ext: "js,css,php".

mix
    .webpackConfig({
        plugins: [new LiveReloadPlugin({
            ignore: /(node_modules)|(vendor)/,
            // https://github.com/livereload/livereload-js/blob/master/src/options.js
            ext: "js,css,php"
        })],