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


関連記事

  • webpack postcssを導入する

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


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

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


  • webpack-dev-serverでhttpsでのアクセスを可能にする方法

    webpack-dev-serverでhttpsでのアクセスを可能にする方法を紹介します。外部APIのテストや、メディアデバイスのテストなどで、開発中のlocalhostをhttpsにする必要があると...


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

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


  • webpackの設定を開発環境と本番環境で変更する

    webpack.config.jsで本番環境でのビルドのみコードを圧縮するなどの処理を設定したい場合があります。webpackの設定を開発環境と本番環境で変更する方法を紹介します。cross-envと...


  • webpack-dev-serverで開発サーバーを起動する

    webpack-dev-serverで開発サーバーを起動します。vueファイル(単一ファイルコンポーネント)をwebpackでビルドページで紹介したwebpack.config.jsにdevServe...


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

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


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

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


  • Vue.js webpackでHot Module Replacementを行う

    開発を効率化するために、Hot Module Replacement(HMR)の設定を行います。Hot Module Replacementを設定しておけば、ブラウザの再読込は行わず、修正した箇所のみ...


  • vue-router webpackでページごとにファイルを分割する

    vue-routerでシングルアプリケーションを作成していると、ページ数が増えるにしたがって作成されるjsファイルのファイルサイズもどんどん増えていきます。ページごとにファイルを分割し、そのページがア...