How to enable hmr in webpack-dev-server?

Question

here is my webpack.config.json.

 var webpack = require('webpack');
    module.exports = {
    context: __dirname + '/src',
    entry: {
     app: './app.js',
     vendor: ['angular', 'angular-ui-router']
    },
   output: {
    path: __dirname + '/js',
    filename: 'app.bundle.js'
   },
   module:{
    loaders: [
      {
        test: /\.scss$/,
        loader: "style!css!sass",
        exclude: /node_modules/
      }
    ],
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js")
  ]
};

how do I turn on hot module replacement, I am using a webpack-dev-server, here is my package.json

{
  "name": "trainingapp",
  "version": "1.0.0",,
  "main": "app.js",
  "scripts": {
    "build": "webpack --bail --progress --profile",
    "server": "webpack-dev-server ./app.js --hot --inline --module-bind --progress --history-api-fallback",
    "start": "npm run server"
  },
  "devDependencies": {
    "angular": "^1.6.0",
    "angular-ui-router": "^0.3.2",
    "css-loader": "^0.26.1",
    "sass-loader": "^4.1.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }
}

Currently I need to refresh my browser to reflect the changes done in my code,I guess enabling hmr will also trigger css changes as well.

Answer 1

since you're using ui-router, give this loader a try Angular Hot Loader

I tried it and it seems working except for templates.