はじめに

最近Vue.jsの2.0がリリースされました。2.0になることによりいろいろなことが変わりましたが、自分が一番気になったのはHMRが出来るようになったことです。

今回はVue.jsでHMRを行うサンプルを作ってみました。

package.json

必要なパッケージをpackage.jsonから抜粋しました。

"devDependencies": {
  "babel-cli": "^6.16.0",
  "babel-core": "^6.17.0",
  "babel-loader": "^6.2.5",
  "babel-preset-es2015": "^6.16.0",
  "css-loader": "^0.25.0",
  "node-sass": "^3.10.1",
  "sass-loader": "^4.0.2",
  "vue-hot-reload-api": "^2.0.6",
  "vue-loader": "^9.5.1",
  "webpack": "^1.13.2",
  "webpack-dev-server": "^1.16.2"
},
"dependencies": {
  "vue": "^2.0.1"
}

大事なのはvue-hot-reload-apiとwebpack-dev-serverです。この二つのパッケージを入れることでHMRが出来るようになります。

webpack.config.js

続いてWebpackの設定です。

var webpack = require('webpack')

module.exports = {
  entry: './js/app.js',
  output: {
    path: "dist",
    publicPath: 'dist',
    filename: 'bundle.js',
  },
  devtool: 'inline-source-map',
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue'
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

大事なのはoutputの項目にpublicPathを足すことと、pluginsの項目にHotModuleReplacementPluginを追加していることです。

JSコード

コンポーネントとエントリポイントのコードです。

my_component.vue

<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>

<script>
  module.exports = {
    data() {
      return {
        message: 'hot reload hoge  aa'
      }
    }
  }
</script>

<style lang="sass">
</style>

app.js

var Vue = require('vue/dist/vue.js')
var myComponent = require('./components/my_components.vue')

var vm = new Vue({
  el: ".app",
  components: {
    'my-component': myComponent
  }
})

ここで気をつけないといけないのが、Vue.jsをrequireしている所で、

require('vue')

としないことです。依存関係の都合らしく、HMRをしたい場合は上記のコードのようにしないといけないようです。

動かしてみる

実際に動かしてみます。下記のコマンドで実行してみます。

% webpack-dev-server --inline --hot

リロードしないで更新されていることがわかります。

おわりに

簡単ですがVue.jsでHMRをやるサンプルを作成しました。これでVue.jsでの開発が楽しくなりそうです。

サンプルはGitHubで公開しています。もっとこうしたほうが良いというようなことがあればプルリクをお願いします。

nasum/vue-hot-reload

参考記事

Hot Module Replacementの設定と仕組みを理解する
 webpack-dev-server を使う