Laravel Mix

LiveReload

While Laravel Mix ships with Browsersync support out of the box, you may prefer to use LiveReload. LiveReload can automatically monitor your files for changes and refresh the page when a modification is detected.

Step 1. Install webpack-livereload-plugin

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

Step 2. Configure webpack.mix.js

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

var LiveReloadPlugin = require('webpack-livereload-plugin');

mix.webpackConfig({
    plugins: [new LiveReloadPlugin()]
});

Although LiveReload works well with its defaults, a list of available plugin options may be reviewed here.

Step 3. Install LiveReload.js

Finally, we need to install LiveReload.js. You may do so via the LiveReload Chrome plugin, or by adding the following code just before the closing </body> tag within your layout file.

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

Step 4. Run the Dev Server

npx mix watch

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