Configuring Webpack LiveReload with Laravel.mix

Konstantin KomelinKonstantin Komelin

There is a webpack plugin for those who prefer LiveReload to BrowserSync. Webpack LiveReload plugin automatically monitors your files for changes and refreshes the page when the changes are detected. I will show you how to make it work now.

1. Install webpack-livereload-plugin

npm i --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.