Sử dụng Live Reload để tự động load lại trang Laravel

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. Cách 1: Sử dụng webpack
1. Install webpack-livereload-plugin

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

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.
3. Cài đặt LiveReload.js Có thể cài đặt thông qua LiveReload Chrome, chèn code sau vào trước thẻ body:

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

4. Chạy dev server

npm run watch

Mỗi khi thay đổi file có trong webpack.mix.js thì website sẽ tự động reload
Cách 2: Sử dụng VScode Extension
1. Cài đặt plugin LiveReload
2. Nhấn Ctrl + Shift + P tìm LiveReload .... để bật/tắt extension
3. Như bước 3 của cách 1
4. Vào link website cần reload, nhấn vào icon extension trên browser để kết nối