angularjs - webpack-dev-server で hmr を有効にする方法は?

Question

これが私の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")
  ]
};

ホットモジュール交換を有効にするにはどうすればよいですか。webpack-dev-server を使用しています。これが私の 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"
  }
}

現在、コードで行われた変更を反映するためにブラウザを更新する必要があります。hmr を有効にすると、css の変更もトリガーされると思います。