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');
mix.webpackConfig({
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>
@endif
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.