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.
since you're using ui-router, give this loader a try Angular Hot Loader
I tried it and it seems working except for templates.