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


関連記事

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

    Laravelの開発サーバーとwebpackの開発サーバー(webpack-dev-server)を共存させ、Hot Module Replacement(HMR)を行います。--hotオプションを指...


  • webpack モジュールのパスを絶対パスで指定する方法

    自分で作成したモジュールをインポートするときはインポートするファイルを基準に相対パスで指定する必要があります。フォルダ構成によっては深く階層を辿らないといけないので、フォルダ構成が変わってしまうと大変...


  • Linuxでファイルの監視(watch)が動作しないときの対処法

    Linuxでファイルの監視(watch)が動作しないときの対処法です。Electronやwebpack-dev-serverの設定が悪いのかと思って1日以上時間を費やしてしまいましたが、Linuxの設...


  • webpack lessをImportしてビルドする

    htmlやbodyなどに適用するベースのクラスを外部のlessファイルに実装して、スタイルをサイト全体に適用したい場合があります。外部のlessファイルをモジュールとしてImportしてwebpack...


  • Vue.js lessで外部のlessファイルをImportする

    メインカラーなどの共通情報は外部のlessファイルに記載し、各vueファイルではそのlessファイルをImportして実装するのが効率的です。.vueファイル内のlessで外部のlessファイルをIm...


  • Laravel MySQLで取得した数値が文字列型になってしまうとき

    以下のようにMySQLで取得した値をJSONでレスポンスするとき、データベースでは数値型で定義していた項目が文字列型になってしまう場合があります。Modelにcastsの設定をしておくと、その型に変換...


  • Laravel sitemap.xmlを動的に作成する

    sitemap.xmlのファイルを作成するのではなく、Laravelのルーティング設定を行い、動的にサイトマップを作成して出力します。


  • Electronとwebpackでfsモジュールを扱う

    Electronでデスクトップアプリを開発時、JavaScriptでfsモジュールをimportしてwebpackを使ってビルドするとエラーになってしまいます。Electronで開発するときはwebp...


  • ExtractTextPluginでcssファイルを出力する

    webpackのプラグインExtractTextPluginを使って、ビルドされたjsファイルからstyleの部分を抽出してcssファイルで出力します。extract-text-webpack-plu...


  • webpack postcssを導入する

    webpackでpostcssを導入してautoprefixerなどを行います。postcss-loaderはwebpackでpostcssを行うために必要です。postcssの設定ファイルを作成しま...