Vue.js webpackでHot Module Replacementを行う
開発サーバー（localhost）の自動リロードで開発を効率化するために、Hot Module Replacement（HMR）の設定を行います。
ファイルやフォルダ構成などの環境は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の内容を確認します。
フォルダ構成や他の環境も影響しますが、基本的には以下の２点を確認します。
outputのpathとdevServerのcontentBaseを同じにするoutputのpublicPathとdevServerのpublicPathを同じにする
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に更新されます。