zukucode
主にWEB関連の情報を技術メモとして発信しています。

Laravelのartisan serveとwebpack-dev-serverを両方使う

Laravelの開発サーバーとwebpackの開発サーバー(webpack-dev-server)を共存させ、Hot Module ReplacementHMR)を行います。

Laravelの開発サーバーの起動

最初にLaravelの開発サーバーを起動します。ポート番号は適宜変更してください。下記の例ではポート番号を8080と指定しているため、localhost:8080が開発サーバーとなります。

$ php artisan serve --port=8080

webpackの設定

次にwebpack.config.jsdevServerの設定を変更します。

Vue.js webpackでHot Module Replacementを行うで設定したwebpack.config.jsportproxyの設定を追加します。

proxyのポート番号はLaravelの開発サーバーのポート番号と同じにします。

webpack.config.js
devServer: {
  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の開発サーバーは起動させておく必要があります。


続きを表示

関連記事