Laravelのartisan serveとwebpack-dev-serverを両方使う
Laravelの開発サーバーとwebpackの開発サーバー（webpack-dev-server）を共存させ、Hot Module Replacement（HMR）を行います。
Laravelの開発サーバーの起動
最初にLaravelの開発サーバーを起動します。ポート番号は適宜変更してください。下記の例ではポート番号を8080と指定しているため、localhost:8080が開発サーバーとなります。
$ php artisan serve --port=8080webpackの設定
次にwebpack.config.jsのdevServerの設定を変更します。
Vue.js webpackでHot Module Replacementを行うで設定したwebpack.config.jsにportとproxyの設定を追加します。
proxyのポート番号はLaravelの開発サーバーのポート番号と同じにします。
webpack.config.jsdevServer: {
contentBase: __dirname + '/public',
publicPath: '/',
port: 3000,
proxy: {
'*': 'http://localhost:8080'
},
noInfo: true,
historyApiFallback: true
}確認
--hotオプションを指定してwebpack-dev-serverを起動すると、Hot Module Replacementが有効でLaravelの開発サーバーと同じフォルダを参照するlocalhost:3000が起動します。
必ずLaravelの開発サーバーは起動させておく必要があります。
Dockerを使う場合
Dockerのコンテナでwebpack-dev-serverを起動してホスト側からアクセスする方法はDockerでwebpack-dev-serverを起動してホストからアクセスするで紹介しています。