enabling hot reload for webpack components

package.json

@@ -20,7 +20,8 @@
     "babel-preset-latest": "^7.0.0-alpha.3",
     "babel-polyfill": "^7.0.0-alpha.3",
 
-    "webpack": "^2.2.1",
+    "webpack": "^2.3.3",
+    "webpack-dev-server": "^2.4.2",
     "yargs": "^7.0.2",
     "babel-loader": "^7.0.0-beta.1",
     "vue-loader": "^11.1.4",

src/components/charts/test-chart.vue → src/components/charts/TestChart.vue

 <template>
-    <div>
-        {{ greeting }}
-    </div>
+  <div>
+    {{ greeting }}
+    <data-box></data-box>
+  </div>
 </template>
 
 
 <script>
+  import DataBox from '../DataBox.vue'
   export default {
     name: 'test-chart',
     data () {
       return {
-        greeting: 'Hello World'
+        greeting: 'Hello World!'
       }
+    },
+    components: {
+      DataBox
     }
   }
 </script>

src/services/chart-manager.js

 import Vue from 'vue'
-import TestChart from '../components/charts/test-chart.vue'
-import CorrelationAnalysis from '../components/charts/correlation-analysis.vue'
+import TestChart from '../components/charts/TestChart.vue'
+import CorrelationAnalysis from '../components/charts/CorrelationAnalysis.vue'
 
 export default class {
   constructor () {

webpack.config.js

@@ -2,7 +2,10 @@ const webpack = require('webpack')
 const path = require('path')
 const env = require('yargs').argv.env
 
-let plugins = []
+let plugins = [
+  new webpack.HotModuleReplacementPlugin(),
+  new webpack.NamedModulesPlugin()
+]
 let filename = ''
 const library = 'fractal'
 
@@ -14,14 +17,21 @@ if (env === 'build') {
 }
 
 module.exports = {
-  entry: ['babel-polyfill', path.resolve(__dirname, 'src/main.js')],
+  entry: [
+    'babel-polyfill',
+    path.resolve(__dirname, 'src/main.js')
+  ],
   devtool: '#inline-source-map',
+  devServer: {
+    hot: true,
+    inline: true,
+  },
   plugins: plugins,
   output: {
     path: path.resolve(__dirname, 'lib'),
     library: library,
     libraryTarget: 'var',
-    filename: filename
+    filename: filename,
   },
   module: {
     rules: [