2016-12-21 44 views
1

这里是我的webpack.config.json。如何在webpack-dev-server中启用hmr?

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的服务器,这是我的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更改。

+0

到目前为止你做了什么?你有没有看过[文档](https://github.com/webpack/docs/wiki/hot-module-replacement-with-webpack)? – dotcs

+0

@dotcs是的,我的浏览器不爽 –

回答

0

由于您使用的用户界面的路由器, 给这个加载器尝试Angular Hot Loader

我试了一下,似乎工作除了模板。