react-hot-loader still reload not HMR - webpack-dev-server

Question

I have webpack.config.js as shown below, running webpack-dev-server using npm run dev, whenever changes are detected it still results hard reloading not HMR
Please guide, what went wrong here, thanks
webpack.config.js
const path = require('path')
const webpack = require('webpack')
module.exports = {
entry: [
'webpack-dev-server/client?http://0.0.0.0:8080',
'webpack/hot/only-dev-server',
path.resolve(__dirname, 'src', 'entry.js')
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true,
},
module: {
loaders: [
{
test: /\.js?$/,
loader: 'babel-loader?cacheDirectory',
exclude: /(node_modules)/
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
]
}
.babelrc
{
presets: ['stage-0', 'es2015', 'react'],
plugins: ['react-hot-loader/babel']
}
package.json
{
"dependencies": {
"react-hot-loader": "3.0.0-beta.6",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
},
"scripts": {
"dev": "webpack-dev-server"
}
}

Answer 1

Do you use module.hot.accept in entry.js file?:
import React from 'react';
import ReactDOM from 'react-dom'
import Navigation from './Navigation';
const rootEl = document.getElementById('root');
const render = Component => {
ReactDOM.render(
<Component/>,
rootEl
)
};
render(Navigation);
if (module.hot) {
module.hot.accept('./Navigation', () => {
render(Navigation)
})
}
WebPack HMR official docs
Interesting issue