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

Vue.js webpackでHot Module Replacementを行う

開発サーバー(localhost)の自動リロードで開発を効率化するために、Hot Module ReplacementHMR)の設定を行います。

ファイルやフォルダ構成などの環境はwebpack-dev-serverで開発サーバーを起動するで紹介したものと同様とします。

Hot Module Replacementとは

ソースを修正して、動作確認をする場合、ブラウザを再読込して確認するのが一般的です。

動作確認したい動作まで複数ステップある場合は、ソースを修正するたびに目的の処理まで同じ手順を行う必要があります。

Hot Module Replacementを設定しておけば、ブラウザの再読込は行わず、修正した箇所のみ反映させることができます。

この機能により、開発スピードがかなり上がります。

設定方法

設定方法はシンプルです。webpack-dev-serverコマンドのオプションに--hotを追加するだけです。

package.json
"dev": "webpack-dev-server --open"
"dev": "webpack-dev-server --open --hot"

--hotを追加して再度webpack-dev-serverを起動します。F12で開発者ツールを開き、Consoleタブを確認すると、以下のメッセージが表示されるはずです。

[HMR] Waiting for update signal from WDS...

うまく行かない場合

上記のメッセージが表示されていない場合はうまく設定ができていませんので、webpack.config.jsの内容を確認します。

フォルダ構成や他の環境も影響しますが、基本的には以下の2点を確認します。

  • outputpathdevServercontentBaseを同じにする
  • outputpublicPathdevServerpublicPathを同じにする
webpack.config.js
// 一部抜粋
module.exports = {
  entry: './resources/assets/js/app.js',
  output: {
    path: __dirname + '/public',
    publicPath: '/',
    filename: 'js/app.js'
  },
  devServer: {
    contentBase: __dirname + '/public',
    publicPath: '/',
    noInfo: true,
    historyApiFallback: true
  }
};

動作確認

--hotオプションを追加してwebpack-dev-serverを起動後、vueファイル(単一ファイルコンポーネント)をwebpackでビルドで作成したvueファイルを編集します。

App.vue
<template>
  <div class="message">
    {{ message }}
  </div>
</template>

<style scoped>
  .message {
    color: red;
  }
</style>

<script>
export default {
  data () {
    return {
      message: 'hello world'
      message: 'hello hmr'
    };
  }
};
</script>

ファイルを保存すると、ブラウザ全体の再読込は行われずに表示される内容がhello worldからhello hmrに更新されます。


続きを表示

関連記事

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

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


  • vueコンポーネントでvue-routerのページ制御を行う

    vueコンポーネントの処理でvue-routerのページ制御を行う方法を紹介します。vue-routerでページ遷移するときはrouter-linkのコンポーネントを使うことが多いですが、コンポーネン...


  • vueファイル(単一ファイルコンポーネント)をwebpackでビルド

    vueファイル(単一ファイルコンポーネント)をwebpackでビルドする手順を紹介します。バージョンは、Vue.jsは2.x、webpackは2.xです。わかりやすくするため、空のプロジェクトから出来...


  • Vue.js lessを使いwebpackでビルドする

    .vueファイル(単一ファイルコンポーネント)のstyleをcssではなくlessで実装して、webpackでビルドをします。vue-loaderのオプションにlessのloaderを追加します。


  • vue-routerを導入してSPAを作成する

    Vue.jsのプロジェクトにvue-routerを導入してシングルページアプリケーション(spa)を作成します。最初にvue-routerのパッケージをインストールします。router-linkはナビ...


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

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


  • Vue.js axiosをajaxライブラリとして導入する

    Vue.jsではajaxまわりの処理は用意されておらず、外部のライブラリを各自で自由に用意するようになっています。axiosの設定用にhttp.jsというファイルを作成します。エントリポイントのapp...


  • Vue.jsを学習する上で知っておきたいES2015の文法

    Vue.jsは公式ドキュメントを始め、ネット上のほとんどのサンプルがES2015(ES6)の表記で実装されています。Vue.jsで頻繁に使用するであろうES2015の文法を紹介します。objectの中...


  • Vue.js 独自のfilterを実装する

    Vue.jsで独自のfilterを実装して、各コンポーネントで使用できるようにします。コンポーネント内で定義することもできますが、今回はグローバルファンクションとして作成して、全てのコンポーネントで使...