Vue.js で Hot Module Replacement をやってみた ref: http://qiita.com/nasum/items/66491fb8a270d01372e1

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
  }
})

file0.txt

"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"
}

file1.js

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()
  ]
};

file4.txt

require('vue')

file5.txt

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

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>