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に更新されます。


関連記事

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

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


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

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


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

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


  • 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 webpackでページごとにファイルを分割する

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


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

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


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

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


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

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


  • Vuex actionでローディングアイコンを表示する

    actionでajaxを行うときにローディングアイコンを表示させます。Vuexのstoreにloadingの状態を持つようにします。また、mutationでloadingの状態を変更でするようにします...