Laravel MixでbrowserSync(hot reload)を有効化する

背景

公式ドキュメントでは以下の設定だけでbrowserSyncはOKとのことだが、hot reloadが全然有効化されなかった。

//webpack.mix.js
mix.browserSync('my-domain.test');

// Or:

// https://browsersync.io/docs/options/
mix.browserSync({
    proxy: 'my-domain.test'
});

対策

公開フォルダを指定しないとリロードが効きません...らしい
参考ブログ
どこに書いてるんですかねそれ...

//webpack.mix.js
mix.browserSync({
    files: [
        "resources/views/**/*.blade.php",
        "public/**/*.*"
    ],
    proxy: {
        target: "http://my-domain.dev/",
    }
});

その他

ローカルでそのまま使うなら

npm run watch

Dockerなどを使用するなら

npm run watch-poll

参考

Laravel MixのbrowserSyncで.cssや.jsの変更もリロードさせる

更新

Laravel MixでbrowserSyncをPHPビルトインサーバーで使うときの注意点