Configuring Webpack LiveReload with Laravel.mix

You probably know that Laravel.elixir was replaced with Laravel.mix in Laravel 5.4. If Laravel.elixir was based on Gulp, then Laravel.mix is built on top of Webpack. Therefore, Gulp plugins are not suitable anymore and we have to replace them with Webpack plugins. Luckily, there is a webpack plugin for those who prefer LiveReload to BrowserSync.

Webpack LiveReload plugin will automatically monitor your files for changes and refresh the page when the changes are detected. In this short post I will show you how to make it work.

1. Install webpack-livereload-plugin

npm install --save-dev webpack-livereload-plugin

2. Configure Laravel.mix

Add the following lines to the bottom of your webpack.mix.js:

var LiveReloadPlugin = require('webpack-livereload-plugin');
    plugins: [
        new LiveReloadPlugin()

Although Webpack LiveReload plugin works well with its defaults, a list of available options which you may pass to LiveRealodPlugin is available in the plugin documentation.

3. Install LiveReload.js to your site

You may do it through LiveReload Chrome plugin or by adding the following code right before the closing </body> tag in your main site template:

@if(config('app.env') == 'local')
  <script src="http://localhost:35729/livereload.js"></script>

4. Run the dev server

npm run watch

Now, LiveReload will automatically monitor your files and refresh the page when necessary.

UPD Feb 21, 2017:
This post with some minor modifications has been added to the Larvel.mix documentation.

I hope you enjoyed the post and learned something new. On this blog, I share my development experience and insights, and if it resonates with you, I invite you to subscribe to my updates.