如何在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更改。

Answer 1

因为你正在使用ui-router，所以试试这个装载机Angular Hot Loader吧

我尝试了它，除了模板之外似乎工作。