react-hot-loader: react-hot-loader not work

Description

I use react-hot-loader and webpack for HMR, i use hot for App , but when i save the code , hot reload not work , how i change ?

Environment

node: 8.9.0 react-hot-loader: 4.1.1 webpack :4.6.0 webpack-dev-server: 3.1.3

Code

webpack.config.js

module.exports = {
  entry: {
    main: [
      'babel-polyfill',
      path.resolve(__dirname, '../src/main.js')
    ]
  },
  output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: './',
    filename: '[name].js',
    chunkFilename: 'chunk/[name].[chunkhash].js'
  }
}

// --------

config.entry.main = (config.entry.main || []).concat([
  'react-hot-loader/patch',
  `webpack-dev-server/client?http://localhost:${PORT}/`,
  'webpack/hot/dev-server'
])
config.plugins = (config.plugins || []).concat([
  new webpack.HotModuleReplacementPlugin()
])
config.mode = 'development'

const compiler = webpack(config)

const server = new WebpackDevServer(compiler, {
  hot: true,
  noInfo: true,
  quiet: true,
  filename: config.output.filename,
  publicPath: '/',
  stats: {
    colors: true
  }
})

App.js

import { hot } from 'react-hot-loader'

import RouterLink from './views/RouterLink'

class App extends Component {
  render () {
    return <RouterLink />
  }
}

export default hot(module)(App)

store.js

const configureStore = () => {
  const store = createStore(
    reducers,
    applyMiddleware(thunk, middleware)
  )

  if (process.env.NODE_ENV !== 'production'){
    if (module.hot) {
      module.hot.accept('../reducers', () => {
        store.replaceReducer(reducers)
      })
    }
  }
  return store
}

main.js

import configureStore from './store'

const history = createHistory()
export const store = configureStore()

ReactDOM.render((
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>
), document.getElementById('app'))